$.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.

`file://localhost` is a weird combination. Do you have a web server? — pimvdb, Dec 16 '11 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, Dec 16 '11 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 coming from. It should be a local path when using `file://`, or `http://localhost/...`. — pimvdb, Dec 16 '11 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, Dec 16 '11 at 10:57
I guess it depends on the browser. For Chrome, have a look at http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file. — pimvdb, Dec 16 '11 at 11:02
@Alexander: http://stackoverflow.com/questions/5224017/origin-null-is-not-allowed-by-access-control-allow-origin-in-chrome-why — Matt, Dec 16 '11 at 11:02
@Alexander Where are you running the webpage from - `http://localhost` ? — graphicdivine, Dec 16 '11 at 11:06
I disabled web security now, and though it still isn't working, there is no error in the console at all. Ideas? — Alexander, Dec 16 '11 at 11:12
@Alexander And can you browse directly to the `json` file? Have you tried working with `JSONP`, by adding either a callback or specifying the dataType in the `getJSON` call? — graphicdivine, Dec 16 '11 at 11:15

score 1 · Answer 1 · answered Feb 04 '13 at 13:38

1

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

answered Feb 04 '13 at 13:38

Okky

10,338
15
75
122

score 1 · Accepted Answer · edited May 23 '17 at 10:30

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?

edited May 23 '17 at 10:30

Community

1
1

answered Dec 16 '11 at 11:06

frank_neff

952
8
16

Any suggestions on an easy webserver to install on OS X? – Alexander Dec 16 '11 at 11:10
@Alexander: http://www.apachefriends.org/en/xampp-macosx.html or the Zend-Community server, but it's a little more complicated: http://www.zend.com/en/products/server-ce/ – frank_neff Dec 16 '11 at 11:14
At the end of the night (it's 4:30am here, my presentation is at 9:30) the webserver was the only solution. Thanks for the help! – Alexander Dec 16 '11 at 11:33
@Alexander: Here it's 0:50 pm... I am glad that I could help you ;) – frank_neff Dec 16 '11 at 11:53

score 1 · Answer 3 · answered Dec 16 '11 at 11:06

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.

score 0 · Answer 4 · edited May 23 '17 at 12:02

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

score 0 · Answer 5 · answered Jan 12 '21 at 18:30

0

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) {}

answered Jan 12 '21 at 18:30

Mohamed Sajjadh

139
2
11

score 0 · Answer 6 · answered Dec 16 '11 at 11:00

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.

score 0 · Answer 7 · answered Dec 16 '11 at 11:06

0

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

answered Dec 16 '11 at 11:06

John Ennis

441
3
6

score -1 · Answer 8 · edited Dec 16 '11 at 10:52

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

edited Dec 16 '11 at 10:52

Matt

74,352
26
153
180

answered Dec 16 '11 at 10:51

Sudhir Bastakoti

99,167
15
158
162

I did make this change, and I still receive the same error. `XMLHttpRequest cannot load http://localhost/Users/blakestruhs/new/lib/js/2k11.json. Origin null is not allowed by Access-Control-Allow-Origin.` – Alexander Dec 16 '11 at 10:55

$.getJSON not working with local JSON file

8 Answers8

Linked