4

I am getting the following error message:

Failed to load resource: the server responded with a status of 426 (Upgrade Required)" error on using JQuery to GET results from https://newsapi.org/v2/top-headlines?country=in&apiKey=..... using proxy-https://cors-anywhere.herokuapp.com/ on a ngrok hosted https site and the localhost too.

But the same process works if I use http instead of https i.e. https://cors-anywhere.herokuapp.com/https://newsapi.org/... and use the http ngrok site.

This is the response I get if I use http-

{status: "error", code: "corsNotAllowed",…} code: "corsNotAllowed" message: "Requests via the browser are not allowed on the Developer plan, except from localhost." status: "error"}

Is there a workaround for this? Will this error go it I host it properly using my domain and by an ssl ?

geek101
  • 194
  • 2
  • 11

1 Answers1

4

You are trying to access an API which is not accepting requests from a website (except from localhost). If the browser comes across a request which is cross-origin, it tries to make a pre-flight request (an initial request to ask the server, it is okay to fetch from this remote address, which is different than the current domain). If the pre-flight request is not responded with a successful message, the Ajax request fails. This behavior is called CORS and it must be supported by the API.

Your API does not seem to allow i.e. it actually forbids CORS requests explicitly. This is usually done, if the API wants to force the developer to make the request on the server-side. The benefit of this is, that the access key is not sent along with the JavaScript code to the visitor of the website but rather it stays on the server.

Try to make the request on your server and then send the data to your front-end from your own server. This also allows to use your own authentication. You could also use a web service like CORS everywhere, but keep in mind that this service has access to all data you are sending and receiving (and it is able to modify the data both-ways).

ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
  • thanks for the prompt response will try to make request on my server but using only jquery html and css I wanted this app to be only client sided is there a way to do it that way? Otherwise what is the best way to make a request on my server ?using node.js? – geek101 May 31 '20 at 22:56
  • Also cors everywhere doesnt work in https and only in http how do i make it work on https? – geek101 May 31 '20 at 22:57
  • How are you serving the data at the moment? Are you already using Node.js or just a plain Apache? Node.js is a simple way to set up a web server and do such a server-side request. – ssc-hrep3 May 31 '20 at 22:58
  • no backend being used right now only jquery and simple javascript and html to display data.$.getJSON(url, function(data) { sort of function being used – geek101 May 31 '20 at 22:59
  • Okay, Node.js would probably the simplest solution. And CORS everywhere seems to need the port specified to support HTTPS. `If the protocol is omitted, it defaults to http (https if port 443 is specified).` – ssc-hrep3 May 31 '20 at 23:00
  • thanks will try this out.was hoping to make the app purely a client sided one but looks like it is tough. how does one specify the port to 443 this is the localhost port or in the $getJSON function? – geek101 May 31 '20 at 23:05
  • You can add the port as part of the URL. Try the URL `https://your-domain.com:443/user` – ssc-hrep3 May 31 '20 at 23:07
  • Use localhost: port/your-working-folder instead of any IP address. From the server, it will work too. – Chamon Roy Sep 09 '20 at 12:06