19

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?

hippietrail
  • 13,703
  • 15
  • 87
  • 133

1 Answers1

38

**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...

hippietrail
  • 13,703
  • 15
  • 87
  • 133
  • How would that work? You are violating the same-origin policy and the call would fail. Wouldn't you need to be making some sort of JSONP call to YQL? – Andrew Mao Sep 13 '12 at 00:16
  • 1
    Not at all because YQL supports [`CORS`](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing), which is a much better alternative to JSONP since it uses the same XHR interface rather than the script-injection method which has some drawbacks. YQL also supports JSONP if you need it though. I'll update my answer. – hippietrail Sep 13 '12 at 16:00
  • If you really want JSONP you can pass in a `callback` parameter as well as `format: 'json'`. – hippietrail Sep 13 '12 at 16:28
  • 1
    Cool beans! I didn't even realize that was a CORS call. I was struggling to figure out how to make a JSONP call to YQL, and it turns out I didn't even have to. Sweet! – Andrew Mao Sep 14 '12 at 17:02
  • @AndrewMao: Internet Explorer 9 doesn't support CORS though. Opera only started to support it in the last couple of months, and I'm not sure how even support is in mobile browsers which are outside my domain. It's not too difficult to write code which will do either a CORS or JSONP call, depending on browser support though, at least with jQuery which uses the same API for JSONP even though it's not XHR at the back end. – hippietrail Sep 15 '12 at 11:47
  • 2
    http://jsonp.jit.su/ is magic ! "Enables cross-domain requests to any JSON API." And it's on Github https://github.com/afeld/jsonp – Joël May 14 '14 at 18:54
  • @Joël: Very constructive answer! You should submit it as an answer and vote to reopen the question. – hippietrail Oct 20 '16 at 05:44
  • 2
    [Here is a list of cors proxies](https://gist.github.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347) – Endless May 07 '17 at 11:37