Fail to load JSON file due to no 'Access-Control-Allow-Origin' is present on the requested resource

Question

I've been trying to get data from a JSON file that's in a Github Repo. I'm using just XMLHttpRequest().

$(function() {
    load();
    function load() {
        var fetch = new XMLHttpRequest();

        fetch.open(
           "GET",
           "https://github.com/prvnbist/Periodic-Elements-App-Using-JSON-And-JQuery/blob/master/elements.json",
           true
    );

    fetch.onload = function() {
        if (this.status == 200) {
            var elem = JSON.parse(this.responseText);`
        }
     }
   }
});

This is the error I'm getting!

Failed to load https://github.com/prvnbist/Periodic-Elements-App-Using-JSON-And-JQuery/blob/master/elements.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

The code works perfectly on localhost, ofcourse but on codepen it's giving me this error which is legit for security purposes but I haven't been able to get around it.

Here's the link to Codepen - https://codepen.io/prvnbist/pen/EwOapM

Don't hit github directly. Use https://rawgit.com/ – Taplar Oct 18 '17 at 17:23 — Taplar, Oct 18 '17 at 17:23

score 0 · Answer 1 · answered Oct 18 '17 at 17:32

You are running into the same origin policy, and the browser is suggesting using CORS to securely access GitHub. But you don't have access to GitHubs servers to make that change.

GitHub is not an API, and thus does not implement the CORS headers. The workaround is to use a proxy service like RawGit to access your files.

Fail to load JSON file due to no 'Access-Control-Allow-Origin' is present on the requested resource

1 Answers1