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 策略阻止