Problem with CORS policy, when making a request to https://newsapi.org [duplicate]

问题

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/.

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.

I have tried to add mode: 'no-cors' to the fetch, but it didn't work with return response.json();

My function looks like this:

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

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.

How I can deal with it, so the API would display information on Github pages and when I run it locally on my pc?

回答1:

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

回答2:

This is something that needs to be configured by https://newsapi.org. It is their site, and with CORS they communicate how and which sites are allowed to embed their content. And most modern browsers follow those restrictions.

You best bet is to contact their support, or look at account settings, maybe you need to use some token or list your site somewhere.

Other than contacting https://newsapi.org and asking them for a licence / CORS change, i guess you could do a proxy server that duplicated their content, but that probably would break the terms of use.

来源：https://stackoverflow.com/questions/61951713/problem-with-cors-policy-when-making-a-request-to-https-newsapi-org

标签

javascript

cors