Fetch() 函数导致资源被 CORS 阻塞

Question

App.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 Jobs API 并显示此消息。

Answer 1

您需要使用 no-cors 标头

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

看看这个codesandbox

希望这个回答对你有帮助:)

Answer 2

试试这个

如果您遇到 cors 问题，您可以从前端解决这个问题。使用-

https://cors-anywhere.herokuapp.com/{type_your_url_here}

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

工作Demo

Answer 3

您可以通过以下几种方式完成它

一个

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;

两个

将mode 参数设置为no-cors。

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

Answer 4

通过使用 create-react-app 代理功能可以解决这个问题。

将代理属性添加到您的 package.json：

{
  // ...
  proxy: "https://jobs.github.com"
}

然后调用fetch函数：

fetch("http://localhost:300/positions.json?description=basf")
      .then(data => console.log(data));