javascript - $.getJSON not working with local JSON file - Stack Overflow

admin管理员组

文章数量:1289889

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.

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.

• javascript
• jquery
• json
• local

Share Improve this question Follow edited Dec 16, 2011 at 11:01 Alexander asked Dec 16, 2011 at 10:48 Alexander Alexander 4911 gold badge11 silver badge77 bronze badges 10

• 1 file://localhost is a weird bination. Do you have a web server? – pimvdb Commented Dec 16, 2011 at 10:49
• I do, and it works great online, but I am making a presentation with this site in a building with no internet access (insane I know) hence the question. – Alexander Commented Dec 16, 2011 at 10:51
• First I believe local files cause security exceptions due to different origins. Other than that, I don't see where your file://localhost is ing from. It should be a local path when using file://, or http://localhost/.... – pimvdb Commented Dec 16, 2011 at 10:52
• I tried using a full path http://localhost/Users/blakestruhs/new/lib/js/2k11.json and I receive the same error. – Alexander Commented Dec 16, 2011 at 10:57
• Is there any way to get past the security issue here? – Alexander Commented Dec 16, 2011 at 11:00

 |  Show 5 more ments

8 Answers 8

Sorted by: Reset to default 1

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?

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

The cross domain plaint 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.

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

XmlHttpRequest isn't allowed cross-domain.

If you need to do a demonstration on a local pc, setup your web app to run on local webserver, and have the json source be returned be the same web application.

That's the only way I can think to make it work. You can't use Ajax calls on filesystem for security reasons.

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

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./a/30896068/2476389

try https://jsonbin.io/ with making the bin as public and provide the url to the getJSON cal

$.getJSON("https://api.jsonbin.io/b/58f9f835a3de5638", function(data) {}

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+'"/>
        });
      }
);

本文标签： javascriptgetJSON not working with local JSON fileStack Overflow