Problems with jQuery getJSON using local files in Chrome

Question

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,

Answer 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() {
.....
}

Answer 2

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

Answer 3

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.

Answer 4

@Mike On Mac, type this in Terminal:

open -b com.google.chrome --args --disable-web-security

Answer 5

This is a known issue with Chrome.

Here's the link in the bug tracker:

Issue 40787: Local files doesn't load with Ajax

Answer 6

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