Problems with jQuery getJSON using local files in Chrome
Solution 1
This is a known issue with Chrome.
Here's the link in the bug tracker:
Issue 40787: Local files doesn't load with Ajax
Solution 2
Another way to do it is to start a local HTTP server on your directory. On Ubuntu and MacOs with Python installed, it's a one-liner.
Go to the directory containing your web files, and :
python -m SimpleHTTPServer
Then connect to http://localhost:8000/index.html with any web browser to test your page.
Solution 3
On Windows, Chrome might be installed in your AppData folder:
"C:\Users\\AppData\Local\Google\Chrome\Application"
Before you execute the command, make sure all of your Chrome windows are closed and not otherwise running. Or, the command line param would not be effective.
chrome.exe --allow-file-access-from-files
Solution 4
You can place your json to js file and save it to global variable. It is not asynchronous, but it can help.
Solution 5
@Mike On Mac, type this in Terminal:
open -b com.google.chrome --args --disable-web-security
Related videos on Youtube
Comments
-
Tauren over 4 years
I have a very simple test page that uses XHR requests with jQuery's $.getJSON and $.ajax methods. The same page works in some situations and not in others. Specificially, it doesn't work in Chrome on Ubuntu.
I'm testing on Ubuntu 9.10 with Chrome 5.0.342.7 beta and Mac OSX 10.6.2 with Chrome 5.0.307.9 beta.
- It works correctly when files are installed on a web server from both Ubuntu/Chrome and Mac/Chrome (try it out here).
- It works correctly when files are installed on local hard drive in Mac/Chrome (accessed with file:///...).
- It FAILS when files are installed on local hard drive in Ubuntu/Chrome (access with file:///...).
The small set of 3 files can be downloaded in a tar/gzip file from here: http://issues.tauren.com/testjson/testjson.tgz
When it works, the Chrome console will say:
XHR finished loading: "http://issues.tauren.com/testjson/data.json". index.html:16Using getJSON index.html:21 Object result: "success" __proto__: Object index.html:22success XHR finished loading: "http://issues.tauren.com/testjson/data.json". index.html:29Using ajax with json dataType index.html:34 Object result: "success" __proto__: Object index.html:35success XHR finished loading: "http://issues.tauren.com/testjson/data.json". index.html:46Using ajax with text dataType index.html:51{"result":"success"} index.html:52undefined
When it doesn't work, the Chrome console will show this:
index.html:16Using getJSON index.html:21null index.html:22Uncaught TypeError: Cannot read property 'result' of null index.html:29Using ajax with json dataType index.html:34null index.html:35Uncaught TypeError: Cannot read property 'result' of null index.html:46Using ajax with text dataType index.html:51 index.html:52undefined
Notice that it doesn't even show the XHR requests, although the success handler is run. I swear this was working previously in Ubuntu/Chrome, and am worried something got messed up. I already uninstalled and reinstalled Chrome, but that didn't help.
Can someone try it out locally on your Ubuntu system and tell me if you have any troubles? Note that it seems to be working fine in Firefox.
-
Nick Craver about 14 yearsMy guess would be Chrome in inappropriately applying the same-origin policy and not issuing requests thinking it's a different domain. Try launching chrome via command line using
--disable-web-security
and see if it works? -
Tauren about 14 years@Nick: thanks, I'll give that a try and see if it helps.
-
Joey Adams about 14 yearsI ran into the same situation, and
--disable-web-security
worked, thanks! -
Tauren about 14 yearsIssue 40787 as located by @Daniel Furrer suggests using
--allow-file-access-from-files
as a "safer" workaround.
-
Ehsan Akbar almost 14 yearsdisable-web-security sounds like a terrible workaround ... i wouldn't recommend that due to security risks.
-
Sakie over 13 yearsmerged and further beaten^H^H^H^discussed at: code.google.com/p/chromium/issues/detail?id=47416 .
-
donohoe over 13 yearsUse this for OSX instead: open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
-
edt about 13 yearsThis worked form me (on Windows 7). First, I went to the directory listed above, then shift+right click on the Google Chrome icon, select "Open Command Line Here" from context menu and finally paste in the command line code given above. Chrome started and displayed content from ajax request to my local machine as desired.
-
edt about 13 yearsAnd... You have to do this every time you open Chrome :(((
-
stackoverflowuser2010 almost 13 yearsmichael's command didn't work for me. Instead, I used this command-line: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files &
-
Joel Anair almost 13 yearsThat is awesome! Thanks, Sébastien!
-
bafromca about 12 yearsI still receive
XMLHttpRequest cannot load _url_. Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.
-
Damien Del Russo over 11 yearsSaved my butt after many seconds of frustration. Thank you sir.
-
Tamlyn over 9 yearsThere's also Mongoose: a multiplatform web server in a single file.
-
S. Kirby over 8 yearsOn Python 3 it's
python -m http.server
. Also, it works fine in Windows too. -
rluks over 8 yearsthis "all of your Chrome window is closed" is very important!