$.getJSON not working with local JSON file

Question

I am desperately trying to get a local build of a site to get a JSON file (also local) with no luck. The exact code worked perfect on my server, but once local, breaks.

I get the JSON with jQuery like so:

$.getJSON(
 "lib/js/app.json",
     function(data){
        $.each(data, function(i,user){
        +'<img src="'+user.thumbnail+'"/>
        });
      }
);

And receive this console error:

XMLHttpRequest cannot load file://localhost/Users/blakestruhs/new/lib/js/app.json. Origin null is not allowed by Access-Control-Allow-Origin.

I'm dying for an answer here. Please help me.

Answer 1

You should use http://localhost over file://localhost;

$.getJSON(
 "http://localhost/Users/blakestruhs/new/lib/js/app.json",
     function(data){
        $.each(data, function(i,user){
        +'<img src="'+user.thumbnail+'"/>
        });
      }
);

Answer 2

Instead of using getJSON, for browsers which support it (including Chrome) you can use the FileReader API.

var r = new FileReader();
r.onload = function(e) {
        var obj = JSON.parse(e.target.result);
        // do what you will with the object
}
// Start the async read
r.readAsText(file);

Note that the file variable needs to be a File or Blob object. The easiest way to get one is to let the user choose it from a file input element. If you need to read a file without asking the user, you might check out: https://stackoverflow.com/a/30896068/2476389

Answer 3

JSON has to load over the HTTP protocol rather than the local file protocol.

The cross domain complaint is that it'll treat each file as a different domain so you need to run it in a web server.

either set up a local webserver or store your JSON in a variable instead and skip getJSON altogether.

Answer 4

Chrome doesn't allow ajax calls to be made to local files. Refer This

Answer 5

I think you use a Webkit browser like chrome, right? Chome does'n see a relation between two local files. Use Firefox or run it on a webserver ;)

"Origin null is not allowed by Access-Control-Allow-Origin" in Chrome. Why?

Answer 6

I think if you access the page that calls the getJSON with the IP address then use the ip address instead of localhost for the json file, effectively they belong to the same domain and it should work