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.