向 https://newsapi.org 发出请求时,CORS 政策出现问题
我一直在我的网站上运行新闻 api 并通过将文件拖到网络浏览器中在我的计算机上进行测试,网址会显示为 file:///C:
.然后我会将任何更改上传到我的 GitHub 存储库并在 Github 页面 https://name.github.io/repository/
上运行它.
I have been running news api on my website and testing in on my computer by dragging the file into the web browser, the url would show up like that file:///C:
. Then I would upload any changes to my GitHub repository and run it on Github pages https://name.github.io/repository/
.
长期以来一切正常,但最终,API 停止工作,控制台中出现错误 Access to fetch at 'https://newsapi.org/v2/everything?xx' from originhttps://name.github.io"已被 CORS 策略阻止:请求的资源上不存在Access-Control-Allow-Origin"标头.如果不透明的响应满足您的需求,请将请求的模式设置为no-cors"以获取禁用 CORS 的资源.
Everything was working fine for a long time, but eventually, the API stopped working and error showed up in the console Access to fetch at 'https://newsapi.org/v2/everything?xx' from origin 'https://name.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
我尝试将 mode: 'no-cors'
添加到 fetch 中,但它不适用于 return response.json();
I have tried to add mode: 'no-cors'
to the fetch, but it didn't work with return response.json();
我的函数如下所示:
const url = 'https://newsapi.org/v2/everything?' +
'qInTitle=""&' +
`from=` +
'language=en&' +
'apiKey=';
const req = new Request(url);
fetch(req).then(function(response) {
return response.json();
}).then(function(news) {
newsLoop(news);
});
当我在本地运行它时,API 也停止工作 file:///C:
,它显示与 Github 页面上的错误类似的错误 Access to fetch at 'https://newsapi.org/v2/everything?xx' from origin 'null' 已被 CORS 策略阻止:请求的资源上不存在Access-Control-Allow-Origin"标头.如果不透明的响应满足您的需求,请将请求的模式设置为no-cors"以获取禁用 CORS 的资源.
The API stopped working also when I run it locally file:///C:
, it displays a similar error to the one on Github pages Access to fetch at 'https://newsapi.org/v2/everything?xx' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
我该如何处理,以便 API 会在 Github 页面上显示信息,以及当我在我的电脑上本地运行它时?
How I can deal with it, so the API would display information on Github pages and when I run it locally on my pc?
推荐答案
你需要一个 CORS 代理
You need a CORS proxy
const proxyUrl = "https://cors-anywhere.herokuapp.com/"
const qInTitle = "";
const from = "";
const apiKey = "";
const url = `${proxyUrl}https://newsapi.org/v2/everything?qInTitle=${qInTitle}&from=${from}language=en&apiKey=${apiKey}`;
const request = new Request(url);
fetch(request)
.then(response => response.json())
.then((news) => {
console.log(news);
})
.catch(error => {
console.log(error);
});
相关文章