Question

I’m currently working on a userscript/extension for Chrome and am trying to pull in some JSON data from “some website”. This was my approach:

$.get( "http://cloud.hartwig-at.de/~oliver/superuser.json", 
       function( data ) { console.log( data ); } 
);

Of course, that leads to the following error:

XMLHttpRequest cannot load http://cloud.hartwig-at.de/~oliver/superuser.json. Origin http://superuser.com is not allowed by Access-Control-Allow-Origin.

I was able to resolve that after reading Origin 'url' is not allowed by Access-Control-Allow-Origin (among other questions). So, this is the next version:

$.get( "http://cloud.hartwig-at.de/~oliver/superuser.json", 
       function( data ) { console.log( data ); }, 
       "jsonp" 
);

Sadly, that results in another error:

Uncaught SyntaxError: Unexpected token : (superuser.json:2)

There’s also a warning telling me “Resource interpreted as Script but transferred with MIME type text/plain:” which already gave me an idea what the trouble could be. (And more details were provided through Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives?)

Apparently, the HTTP server has to send the proper MIME type for my file, which would be application/json.

Okay, So I quickly added the required change to my mime.types and went for another go. But, no dice! The warning went away, the error didn’t. I still get Uncaught SyntaxError: Unexpected token :. (I had also previously attempted to utilize the mimeType parameter to fix this, the outcome was the same.)

The MIME type looks fine though:

Now I’m somewhat out of ideas. The content of the .json file validates fine on http://www.jslint.com/

Answer 1

You can’t use JSONP on a request unless the server supports it. The way JSONP calls work is that you pass a callback=something parameter along with the request and the server encapsulates the JSON with something() so that it can be loaded by your browser by calling something when the script is accessed.

Another way to get it to work is to configure that server to set the CORS headers correctly, if you own the domain.

If you don’t have access to the server, consider using a JSONP proxy, which wraps the first step for you. I’ve used YQL to do this (see the link), which doesn’t require me to set anything up myself. Below is coffeescript code that does that:

uri = "http://cloud.hartwig-at.de/~oliver/superuser.json"      

jqxhr = $.getJSON \
  "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22" \
    + encodeURIComponent(uri) + "%22&format=json&callback=?"  

jqxhr.success (yql) ->
  unless yql.query.results
    alert("Failed to get stuff")
    return      
  json = $.parseJSON(yql.query.results.body.p)
  # do stuff with json

And in the form of javascript using http://js2coffee.org:

uri = "http://cloud.hartwig-at.de/~oliver/superuser.json";

jqxhr = $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22"
        + encodeURIComponent(uri) + "%22&format=json&callback=?");

jqxhr.success(function(yql) {
  var json;
  if (!yql.query.results) {
    alert("Failed to get stuff");
    return;
  }
  json = $.parseJSON(yql.query.results.body.p);
  // do stuff with json
});