0

I am parsing a json file in my Javascript code like below.

$.getJSON('file:///dashboard.json', function (json) {

However, it throws

XMLHttpRequest cannot load file:///dashboard.json. Cross origin requests are only supported for HTTP.

I've been looking for solutions for almost 7 hours collectively, but most suggestions were to use this:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

or

open -b com.google.chrome --args --allow-file-access-from-files

and even when I opened Chrome with the second command, the same Cross origin request error is thrown.

The first command does not even run, as you can see below.

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome
[708:1287:0401/174956:ERROR:process_singleton_mac.cc(103)] Unable to obtain profile lock.
$ [0401/174957:ERROR:mach_broker_mac.mm(152)] Failed to look up named parent port: 0x44e unknown error code

I tried launching a server with this file, on port 8000, and accessing it by providing url http://localhost:8000/dashboard.json, but it does not fix Cross origin request error. (My web app runs on port 8080).

What is the problem? How can I fix this? Please help me. Thank you.

Zini
  • 916
  • 7
  • 15
Eric Na
  • 2,381
  • 5
  • 18
  • 49
  • 1
    you are looking for cross-origin. see this answer: http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome/6083677#6083677 – michael truong Apr 02 '14 at 00:58

1 Answers1

1

Different port number cause the cross origin issue as well:http: //localhost:8000 access a json file which is from http: //localhost:8080. There are various ways to resolve cross-origin resource accessing issue, such as CORS, Server-proxy and JSONP.

I think you could try to use JSONP to solve this issue in your case.

Step 1: Update the dashboard.json and change the file type to javascript. (Refer to this doc if you want to know how JSONP works)

//assume that the json data looks like this {tabs:[{id:"1",name:"tab1",status:"on"},{id:"2",name:"tab2",status:"off"}]}
var data = {tabs:[{id:"1",name:"tab1",status:"on"},{id:"2",name:"tab2",status:"off"}]};        
onGetDashboardJSON(data);

Step 2: Use $.ajax to fetch cross origin json data in JSONP way

$.ajax({
    url: "http://localhost:8080/dashboard.js",
    dataType:"jsonp",
    success: function(response){

    },
    error: function(response){

    }
});

function onGetDashboardJSON(result){
    //do anything you want with the JSON 
    console.log(result);
}

Hope this helpful.

Chickenrice
  • 5,699
  • 2
  • 19
  • 21
  • In my opinion, loading data by using AJAX call with file:// protocol is not a good solution. It has browser (chrome disallows AJAX call with file protocol, but IE supports it(ActiveXObject)) and security issue. @user2418202 had tried to put json file in the web server and access it with http:// protocol, so I suggested a solution for accessing cross-origin resource and tried to explain why his try does not work. – Chickenrice Apr 02 '14 at 09:07