函数的作用是：导致资源被CORS阻止

Question

pp.js：

import React from 'react';
import './App.css';

class App extends React.Component {

  state = {
    character : {}
  };

  componentDidMount() {
    fetch("https://jobs.github.com/positions.json?description=basf")
      .then(data => console.log(data));
    console.log("Hello World");
  }

  render() {
    return (
      <div className="App">
        <h2>Hello World</h2>
      </div>
    );
  }
}

export default App;

错误消息-

在'https://jobs.github.com/positions.json?description=basf“起源”http://localhost:3000'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源。

无法获取

你能给我提供如何通过这个问题，并获得所需的数据。我正在使用Github作业API及其显示此消息。

Answer 1

这里有几种方法可以让你做到这一点

一

import React from 'react';
import './App.css';

class App extends React.Component {

  state = {
    character : {}
  };

  componentDidMount() {
    fetch("https://jobs.github.com/positions.json?description=basf",{
                headers: {
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*'
                })
      .then(data => console.log(data));
    console.log("Hello World");
  }

  render() {
    return (
      <div className="App">
        <h2>Hello World</h2>
      </div>
    );
  }
}

export default App;

两个

将模式参数设置为无cors。

fetch("https://jobs.github.com/positions.json?description=basf", {
      mode: "no-cors" // 'cors' by default
    }).then(data => console.log(data));

Answer 2

试试这个

如果您面临cors问题，您可以从前端解决此问题。使用-

https://cors-anywhere.herokuapp.com/{在此处键入您的url}

  componentDidMount(){
    fetch('https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?description=basf'
    )
    .then(data => data.json())
    .then(data=>console.log(data))
  }

工作演示

Answer 3

您需要使用no cors标题

 fetch("https://jobs.github.com/positions.json?description=basf", {
      mode: "no-cors" // 'cors' by default
    }).then(data => console.log(data));

看看这个代码沙盒

我希望这个答案对你有所帮助：）