0

I am trying to access website APIs from my local drive to work with their data. I followed the JSON doc on MDN (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) and it worked great. I can access and get the same data as shown in the doc with the code below. However when I change to a different website's API, I get an "Access-Control-Allow-Origin" error. For example if I use (http://quotesondesign.com/wp-json/posts).

After doing some search online, it seems to have to do with CORS setup on some servers. I read through the CORS doc (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) but still having trouble with it.

Some search results also mentioned a work around like using proxy but I am reluctant to use it as it seems unwieldy. I also tried Jquery and AJAX but I still get the same error when it tries to open the request.

   <script>
var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';   

var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseTYPE = 'json';
request.send();

request.onload=function() {
    var superHeroes = JSON.parse(request.response);  //Parse the files
    populateHeader (superHeroes);
    showHeroes(superHeroes);
}

...

When I say local drive, I mean I saved the html code in a notepad file on my C:\document drive and running the file there. Any advice? Thanks.

Skycloud
  • 37
  • 7
  • the code you've shown works fine, even when loading `file:///` – Jaromanda X May 29 '18 at 03:09
  • 1
    `but still having trouble with it` - thing with CORS is, it's reponse headers sent by the server - if a server doesn't send CORS headers in the response, then there's nothing for you to do about it – Jaromanda X May 29 '18 at 03:11
  • Yes the code shown works fine. But if I change the var requestURL to a different URL like "http://quotesondesign.com/wp-json/posts" then I get this error in IE10: [CORS] The origin 'file://' did not find 'file://' in the Access-Control-Allow-Origin response header for cross-origin resource at 'http://quotesondesign.com/wp-json/posts'. – Skycloud May 29 '18 at 13:58
  • And this on firefox: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://quotesondesign.com/wp-json/posts. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://null’). – Skycloud May 29 '18 at 13:59
  • yes, because not all sites allow CORS – Jaromanda X May 29 '18 at 23:26

1 Answers1

1

Web browsers agree with the server CORS policy by default. Developers sometimes disable security protections to test things out. Be sure to turn it back on for normal browsing.

With Chrome on windows, this flag enabled that API to work for me:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

This works well in a shortcut for special uses.

More info on bypassing CORS in Chrome and FireFox here: https://pointdeveloper.com/how-to-bypass-cors-errors-on-chrome-and-firefox-for-testing/

Update: In Firefox, the about:config option to disable "strict_origin_policy" is limited. So to get this working, you can try the CORS Everywhere add-on. This worked for me on Firefox 52.8.

CORS Everywhere screenshot

The CORS Everywhere icon will toggle green after you click it, which enables CORS.

Chris C.
  • 347
  • 2
  • 7
  • Thanks for the reply. I tried disabling that flag in FireFox as described on that website but I still get the same error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://quotesondesign.com/wp-json/posts. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://null’). – Skycloud May 29 '18 at 14:02
  • Have you tried the "CORS Everywhere" add on for FireFox? It worked with quotesondesign when I installed it. I updated my answer. – Chris C. May 29 '18 at 18:17
  • Thanks. Appreciate the responses. I'll try the add-on later. – Skycloud May 29 '18 at 19:59