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

Posted

技术标签:

【中文标题】Fetch() 函数导致资源被 CORS 阻塞【英文标题】:Fetch() function causing a resourse blocked by CORS 【发布时间】:2020-04-18 23:04:43 【问题描述】:

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 并显示此消息。

【问题讨论】:

这能回答你的问题吗? No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API 您不需要传递凭据来访问该 API 吗? 【参考方案1】:

您需要使用 no-cors 标头

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

看看这个codesandbox

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

【讨论】:

【参考方案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

【讨论】:

这可行,但使用https://cors-anywhere.herokuapp.com/没有限制吗? @nibble 不...您可以使用它,因为它在内部已经实现了安全 HTTP 调用。 现在无法使用,因为服务器已关闭。【参考方案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));

【讨论】:

【参考方案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));

【讨论】:

以上是关于Fetch() 函数导致资源被 CORS 阻塞的主要内容,如果未能解决你的问题,请参考以下文章

CORS 阻止访问资源:如何在 Firebase 云功能中修复?

ReactJS:对 fetch 的访问已被 CORS 策略阻止

识别由于 CORS 问题导致的提取错误

跨域CORS

React JS:尝试获取资源时导致 NetworkError 的 CORS 错误

异步非阻塞