Cant read a json file on my local server from my web-server

Question

So i have a json file named array.json on my web-server i intend to read this file in my web-application locally (for now) and then on a different domain once i go live, i have created this json file myself and here is the data it contains.

 {"h1": "cmPanel", "h2" : "cmAuto", "h3": 0}

When i am trying to read the file I am not getting back a response, why would this be?

Here is my code for reading the file;

$.getJSON('http://www.foobar.com/array.json', function(data){
     alert(data);
 });

I have also tried adding &callback=? and still i receive nothing, could you please assist !

score 3 · Answer 1 · answered Aug 23 '11 at 14:42

3

Quoting official docs:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

Script and JSONP requests are not subject to the same origin policy restrictions.

More info about Same Origin Policy

To work around it, look into JSONP.

answered Aug 23 '11 at 14:42

Sarfraz

377,238
77
533
578

Thanks for the information, now how do i structure JSONP data, what is the actual issue from what you've just told me all i know is i am using the wrong type of data structure... – Xavier Aug 23 '11 at 14:44
@Xavier: You can working around it through JSONP, look here for more information and how to use it: http://en.wikipedia.org/wiki/JSONP – Sarfraz Aug 23 '11 at 14:46

score 1 · Accepted Answer · answered Aug 23 '11 at 14:54

In order to do cross-domain ajax calls you will either need to use a proxy or JSONP. Since you're setup for JSON already JSONP might be the easiest alternative. In short, JSONP entails wrapping your JSON data in a function call so it can be passed back to the calling script in a way that circumvents the Same Origin Policy.

In your case, you could wrap your json data with function named "myjsoncallback" so that it looks like this:

myjsoncallback({"h1": "cmPanel", "h2" : "cmAuto", "h3": 0})

And then change your ajax call to something like the following:

$.ajax({
    url: 'http://www.foobar.com/array.json',
    dataType: 'jsonp',
    jsonpCallback: 'myjsoncallback',                // Specify our callback function name
    success: function(data) { console.log(data); }
});

Hello Joe, thanks for this code so far it seems to be fetching the data i just receive a MIME type error in console `Resource interpreted as Script but transferred with MIME type text/plain.` — Xavier, Aug 23 '11 at 15:02
If you're able you should set the MIME type to application/javascript. — Joe Landsman, Aug 23 '11 at 15:11

score 0 · Answer 3 · answered Aug 23 '11 at 14:46

Have you got access to the server from your web application? (same origin policy)

To use jsonp you could not simply add callback to the URL of the json file. The server should deliver a function that return the data. This file you could include with the default html script tag and execute the returned function afterwards.

score 0 · Answer 4 · answered Aug 23 '11 at 14:48

To see the returned json you need to itterate the result

$.getJSON('array.json', function(data){
    var items = [];

   $.each(data, function(key, val) {
      items.push('Key = ' + key + '<br/>Value = ' + val + '<br/><br/>');
   });
   alert(items.join(''));
 });

score 0 · Answer 5 · edited May 23 '17 at 12:26

0

array.json shoud be served with proper Content-Type:
text/javascript; charset=utf-8 if callback is used
application/json; charset=utf-8 if it is plain json
see here Best content type to serve JSONP?
to avoid problems from 'same origin policy'

edited May 23 '17 at 12:26

Community

1
1

answered Aug 23 '11 at 14:49

Saic Siquot

6,513
5
34
56

Hey Luis thanks for your response how would i set the content type? Would i put `content-type=text/javascript; charset=utf-8` in the header of the json file? – Xavier Aug 23 '11 at 15:01
doesn't work bud, so just to confirm i just paste `content-type=text/javascript; charset=utf-8;` above my data? or do i need to define `` – Xavier Aug 23 '11 at 15:09
none of them. you need a .php file that calls header() sentence (or similar with your prefered language) or adjust your mime-types on the server to vinculate 'text/javascript;' with .json files (as your extension is .json) – Saic Siquot Aug 23 '11 at 15:14

Cant read a json file on my local server from my web-server

5 Answers5