How can I use JSON on the web page from a source with neither CORS nor JSONP?

Question

Some JSON data services on the Internet are designed to be consumed only by servers and neglect the possibility of being consumed directly by a web-only app.

Due to cross-site concerns, such services would work if they either provided a JSONP format or enabled CORS support.

I want to make a little JavaScript tool that can call an online resource that only returns JSON and not , and does not support .

One example case was a single-page app I was making for which the only data source I could find didn't provide CORS or JSONP. Being a single-page app, it had no server of its own so was subject to the same-origin policy.

What strategies are available in such cases?

Answer 1

**One way is to find a proxy that can access a JSON data source and then serve it to your web app transformed to work with JSON, CORS, or any other format that you can handle without worrying about cross-site concerns.

One such proxy is Yahoo's "YQL".

YQL supports both JSONP and CORS.

So if your browser also supports CORS you can think of it as a free JSON to JSON proxy server. If not, then it is also a free JSON to JSONP proxy:

Here's an example of how I used it with jQuery:

$.getJSON("http://query.yahooapis.com/v1/public/yql",
  {
    q:      "select * from json where url=\"http://airportcode.riobard.com/airport/" + code + "?fmt=JSON\"",
    callback: gotJSON, // you don't even need this line if your browser supports CORS
    format: "json"
  },
  function(data){
    if (data.query.results) {
      /* do something with
        data.query.results.json.code
        data.query.results.json.name
        data.query.results.json.location
      */
    } else {
      /* no info for this code */
    }
  }
);

And a version on jsfiddle...