When trying to use $.getJSON on a local JSON file in a local environment, Chrome doesn’t load the file schema and an error occurs.

var jsonFilePath = "./json/sample.json";

$.getJSON(jsonFilePath, function(data){
  // do something
});

Error Message

XMLHttpRequest cannot load file:///Users/username/Downloads/hoge.json.
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource.

It seems the only option is to set it up on a staging server and check via http.

An easy way to verify is to place it in Dropbox’s Public directory and access it via a URL like https://dl.dropboxusercontent.com/u/xxx/index.html.

Reference Information

• Unable to perform Ajax asynchronous communication using Chrome. (3593) | teratail
• Cross-Origin XMLHttpRequest - Google Chrome
• jQuery.getJSON() | jQuery API Documentation

That’s all from the Gemba.