49

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.

Tauren
  • 26,795
  • 42
  • 131
  • 167
  • 3
    My 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? – Nick Craver Mar 30 '10 at 01:59
  • 1
    I ran into the same situation, and `--disable-web-security` worked, thanks! – Joey Adams May 01 '10 at 23:37
  • 7
    Issue 40787 as located by @Daniel Furrer suggests using `--allow-file-access-from-files` as a "safer" workaround. – Tauren May 07 '10 at 20:55

7 Answers7

38

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.

Sébastien RoccaSerra
  • 16,731
  • 8
  • 50
  • 54
30

This is a known issue with Chrome.

Here's the link in the bug tracker:

Issue 40787: Local files doesn't load with Ajax

Daniel Furrer
  • 572
  • 6
  • 10
14

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
Sylhare
  • 5,907
  • 8
  • 64
  • 80
Thomas
  • 241
  • 3
  • 3
  • This 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 Apr 09 '11 at 18:15
  • And... You have to do this every time you open Chrome :((( – edt Apr 09 '11 at 18:46
  • 1
    this "all of your Chrome window is closed" is very important! – rluks Nov 19 '15 at 13:13
3

You can place your json to js file and save it to global variable. It is not asynchronous, but it can help.

Zdeněk Mlčoch
  • 722
  • 6
  • 17
1

@Mike On Mac, type this in Terminal:

open -b com.google.chrome --args --disable-web-security
Harry
  • 87,580
  • 25
  • 202
  • 214
Shazron
  • 2,446
  • 1
  • 18
  • 30
  • disable-web-security sounds like a terrible workaround ... i wouldn't recommend that due to security risks. – Joey V. Jul 13 '10 at 11:29
  • 7
    Use this for OSX instead: open /Applications/Google\ Chrome.app --args --allow-file-access-from-files – donohoe Jan 24 '11 at 21:42
  • michael'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 & – stackoverflowuser2010 Jun 28 '11 at 20:57
1

This code worked fine with sheet.jsonlocally with browser-sync as the local server. -But when on my remote server I got a 404 for the sheet.json file using Chrome. It worked fine in Safari and Firefox. -Changed the name sheet.json to sheet.JSON. Then it worked on the remote server. Anyone else have this experience?

getthejason = function(){
var dataurl = 'data/sheet.JSON';
var xhr = new XMLHttpRequest();
xhr.open('GET', dataurl, true);
xhr.responseType = 'text';
xhr.send();
console.log('getthejason!');

xhr.onload = function() {
.....
}
Luke Dohner
  • 191
  • 1
  • 5
1

An additional way to get around the problem is by leveraging Flash Player's Local Only security sandbox and ExternalInterface methods. One can have JavaScript request a Flash application published using the Local Only security sandbox to load the file from the hard drive, and Flash can pass the data back to JavaScript via Flash's ExternalInterface class. I've tested this in Chrome, FF and IE9, and it works well. I'd be happy to share the code if anyone is interested.

EDIT: I've started a google code (ironic?) project for the implementation: http://code.google.com/p/flash-loader/