CODEWITHSUNDEEP
javascriptapicors
learningHappily
learningHappily

Reputation: 57

Javascript CORS GET request blocked or invalid

I'm struggling for quite some time already with issuing a simple GET request to a 3rd party REST Api. I've read a bit of tutorials and SO questions but I just can't get it to work. I am getting one of two errors

Response for preflight is invalid (redirect)

or (if via https)

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:8433' is therefore not allowed access.

About 2nd message: Is it just a problem with the server not supporting CORS?

My code:

var xmlHttp = new XMLHttpRequest();
var url = 'https://inspirehep.net/record/451647?of=recjson&ot=recid,number_of_citations,authors,title'; //http or https, tried both

/* 
   doing sth with response here like populate dropdown etc.
*/

xmlHttp.open('GET', url, true);
xmlHttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Cache-Control");
xmlHttp.setRequestHeader("Content-Type", "application/json");
xmlHttp.setRequestHeader("Access-Control-Allow-Origin", '*');
xmlHttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
xmlHttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
xmlHttp.send();

Whole app is running on node.js server (localhost) and the script above is included as separate file in .html view.

I can correctly get json response from web-browser, fiddler, postman etc. for this API. I also tried different APIs (e.g. Openweather API) thinking that it's the problem with server configuration, but the result was the same.

I would be thankful for any help - maybe i'm just misunderstanding something about CORS.

Upvotes: 2

Views: 5275

Answers (3)

Delmontee
Delmontee

Reputation: 2364

Late to the party...

http://cors-anywhere.herokuapp.com/ is great, but you don't need it if you are using XMLHttpRequest() and a GET method. Simply exclude your header requests...

var xhr = new XMLHttpRequest();
xhr.open( "GET", YOURURL );
//OMIT THESE...
  //xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  //xhr.withCredentials = true;
  //xhr.setRequestHeader( 'Content-Type', _contenttype );
  //xhr.setRequestHeader( 'CrossDomain', 'true' );
//....

xhr.addEventListener( 'load',  function () {
       xhr.responseJSON = JSON.parse( xhr.responseText );
       alert( xhr.responseJSON);
});

xhr.onerror = function(e) { 
      alert("Ajax request error");
};

xhr.send( JSON.stringify({}) );

Upvotes: 0

xmorera
xmorera

Reputation: 1961

The answer on CORS with nodejs is most likely right, but I want to suggest that you run a test to make sure your code works fine as well.

Try with Chrome and download an extension to allow CORS. This way you will test the functionality first before trying the right solution.

Upvotes: 0

Abdullah Shahin
Abdullah Shahin

Reputation: 1052

you cannot set headers from the browser, if the target url runs on your server or a server that you manage and that server runs nodejs you can use cors https://www.npmjs.com/package/cors, however, if this is a third party url and it doesn't not allow CORS, then you should make the request from the your back-end through configuring a proxy from your server to third party server, that should resolve your problem.

Upvotes: 3

Related Questions