Cross-domain Jquery JSONP POST to Rails app

Question

This is killing me. Trying to load data from a different domain from an API-sorts of that I'm trying to write. When sending JSON parameters as POST they get discarded, I've read somewhere that some special headers must be set before_filter:

  def cors_headers #set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
    headers['Access-Control-Max-Age'] = "1728000"
    headers['Access-Control-Allow-Headers'] = 'content-type, accept'
  end

Haven't had any luck with these though. Guess it's a browser limitation.

When I try sending the data as GET instead of POST, it gets added to the URL like this:

Completed in 959ms (View: 0, DB: 2) | 200 OK [http://www.somedomain.com/connector/browse/Sport.json?callback=jQuery16105855946165975183_1379526705493&{%22filters%22:[{%22filter%22:{%22attribute%22:%22id%22,%22op
erator%22:%22%3E%22,%22value%22:%222%22}},{%22filter%22:{%22attribute%22:%22id%22,%22operator%22:%22%3C%22,%22value%22:%227523%22}}]}&_=1379526723982]

So Rails basically can't see the filters which are the params that I'm trying to send

  Parameters: {"{\"filters\":"=>{}, "id"=>"Sport", "_"=>"1379526723982", "callback"=>"jQuery16105855946165975183_1379526705493"}

The jquery snippet I'm playing with is:

        $jq.ajax({url: "http://www.somedomain.com/connector/browse/" + x + ".json" + "?callback=?",
            type: "get", // tried post too
            dataType: "json", // tried jsonp too
            accepts: "json",
            data: req_data, // this is JSON.stringified already
            processData:false,
            contentType: "application/json; charset=UTF-8;",
            success: output
        });

The sample data I'm trying to send is this

{"filters":[{"filter":{"attribute":"id","operator":">","value":"2"}},{"filter":{"attribute":"id","operator":"<","value":"7523"}}]} 

Has anyone an idea on how to sort this out?

Muchos gracias!

Answer 1

Basically the JS SOP prevents us from sending a POST request and reading the response, but this can be worked around like this:

1) Compose the request data, send it as POST. Don't expect to receive a response. Don't use on success, use on complete instead. Add a random-ish variable to the request

2) Temporarily store the response on the server side in a file or session variable or memcached server, use the random var mentioned above as key within the store.

3) send a 2nd JSON AJAX call to fetch the cached object.

With memcached, make sure the cached responses get removed from time to time or expire, in my case the app gets a lot of traffic, it would spam my memcache servers with junk if not set to expire.

here's some sample code