2

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?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Okwa
  • 77
  • 1
  • 9
  • did you find a solution to this issue? I also started experiencing this at the same time. The cors-anywhere cors proxy doesn't seem to be working for me. – VerticalGrain Jun 03 '20 at 19:04
  • the proxy worked for a while, but now I get `426 (Upgrade Required)` error, no sure what can cause this – Okwa Jun 04 '20 at 11:35
  • i had the same problem, found out that NewsApi is no longer free, and only works in dev mode, so it's fine on localhost, but not when deployed through the back end.... It too me a while to figure it out, I was racking my brain, building proxies and trying so many things... now I think the only way around it is to build a your own node express server. – cyberAnn Jun 12 '20 at 17:48

2 Answers2

5

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);
  });
Józef Podlecki
  • 10,453
  • 5
  • 24
  • 50
1

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.

Jkarttunen
  • 6,764
  • 4
  • 27
  • 29