向https://newsapi.org请求时，CORS政策存在问题 [英] Problem with CORS policy, when making a request to https://newsapi.org

问题描述

我一直在网站上运行新闻api，并通过将文件拖到网络浏览器中在计算机上进行测试，该URL会显示为 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停止工作，并且控制台中出现错误可以从 https://newsapi.org/v2获取来源 https://name.github.io的/ everything？xx已被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'，但是在 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也停止工作C：，它显示与Github页面上的错误类似的错误，可从来源 null访问 https://newsapi.org/v2/everything?xx 已被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页面上显示信息，以及当我在PC上本地运行它时显示信息吗？

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代理

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);
  });

这篇关于向https://newsapi.org请求时，CORS政策存在问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！