Sinatra, JavaScript Cross-Domain Requests JSON

Question

I run a REST-API build on top of Sinatra. Now I want to write a jQuery Script that fetches data from the API.

Sinatra is told to response with JSON

before do
  content_type :json
end

A simple Route looks like

get '/posts' do
  Post.find.to_json
end

My jQuery script is a simple ajax-call

$.ajax({
  type: 'get',
  url: 'http://api.com/posts',
  dataType: 'json',
  success: function(data) {
     // do something
  }
})

Actually everything works fine as long as both runs on the same IP, API and requesting JS. I already tried to play around with JSONP for Rack without any positive results, though. Probably I just need a hint how to proceed.

Answer 1

Use JSONP (JSON with padding). There is a JSONP extension for Rack.

Basically, you'll call:

$.ajax({
  type: 'get',
  url: 'http://api.com/posts',
  dataType: 'jsonp',
  success: function(data) {
     // do something
  }
})

which translates to a request like:

http://api.com/posts?callback=someJSFunc

and your server will respond, e.g.:

someJSFunc({"json":"obj"});

Of course, clients can do JSONP requests without jQuery. The trick with JSONP is you serve scripts, which can be cross-domain, rather than pure JSON, with cannot.

Answer 2

Thank's for the answers so far. You were right and jsonp would solve the problem. The code snippets for javascript work fine. To set up Sinatra is very easy as it is build on top of Rack. Therefore simply install the rack-contrib gem

 gem install rack-rack-contrib --source=http://gems.github.com/

(or put it in your Gemfile) and add

require 'rack/contrib/jsonp'
use Rack::JSONP

to your application.

This middleware provides regular JSON to non-JSONP clients and JSONP to jQuery & co.

Answer 3

It might be interesting to you http://github.com/shtirlic/sinatra-jsonp — this extension adds missing functionality to sinatra

Also available as gem gem install sinatra-jsonp

Answer 4

Try to call

$.getJSON("http://example.com/?callback=?",function(data) { alert(data); });

In this sample main keyword is construction "callback=?", so you need to process this param in your server-side script, and make a valid JSONP, like this:

function({ "foo" : "bar" });

Where "function" is random data, which is generated by jQuery automatically. Read more here about jQuery and cross-domain JSONP.