没有JSONP的跨站点调用

Question

I am having a application where frontend being built using HTML, CSS and Javascript code. Backend will be created using core java, Restlet.

Now the real problem is frontend and backend both will be on diff servers with diff ports too. like, frontend is on: http://clientLookup (just for example) And backend is on, http://lcgrke:8080

Now as i will send the server or rest calls from frontend via Ajax Request or jQuery Ajax then i am getting the cross side scripting issue (SOP - same origin policy). I am not getting how to get around this.

JSONP can be one of the option, but it will work for only GET type calls only, but in my application i will have GET/POST requests. Also, some urls of server wont be JSONP enabled (dont ask me why, just accept they will be non-editable), so JSONP doesnt seem to be better option.

Can anyone please explain me how i will get around this issue?

Answer 1

I had the same issue not too long ago. You can install PHP on your frontend server and make the AJAX call to a PHP script on that server. There are several HTTP libraries for PHP (cURL being the most popular) that you can then use to make an HTTP request to your backend server. Basically you can write a PHP script on your frontend server to act as a middle man.

Answer 2

The modern way to handle cross site requests is using CORS instead of JSONP , although you have to be aware about which browsers support CORS.

You can use CORS with almost modern browsers (IE10, FF, Chrome, Safari, Opera), but not with IE9/8.

With IE9/8 you can use another technique called XDomainRequest , but you must implement it via JSNI.

The goal of using CORS vs JSONP is that in your server side you just add a filter and everything should work out-of-the-box (RPC, RF, etc).

To use CORS in gwt, you can read this page in the gwtquery site where you have a filter example. In that page you also have useful info about jsonp, and how to use gwtquery ajax which simplifies the gwt RequestBuilder way.

Answer 3

If you are using PHP and have php_culr library available you might want to leverage the cross origin to the server. You can see an example here: http://davidwalsh.name/curl-post or you could use file_get_contents function and serialize the posted parameters or just pass the get parameters you want (if needed).

Hope this helps.

Answer 4

Ben Alman has a simple proxy script that I've used as a temporary workaround for this kind of situation.

Basically, it forwards GET and POST requests using curl.

http://benalman.com/projects/php-simple-proxy/

$url = $_GET['url'];
$ch = curl_init( $url );
curl_setopt($ch, CURLOPT_VERBOSE, true);
if ( strtolower($_SERVER['REQUEST_METHOD']) == 'post' ) {
  curl_setopt( $ch, CURLOPT_POST, true );
  //curl_setopt( $ch, CURLOPT_POSTFIELDS, $_POST );

  $vin = $_POST["vin"];
  $subscriberProgramXML = $_POST["subscriberProgramXML"];

  $data = array("vin" => $vin, "subscriberProgramXML" => $subscriberProgramXML);
  $data_string = json_encode($data);

  $httpHeader = array('Content-Type: application/json', 'Content-Length: ' .strlen($data_string));

  curl_setopt( $ch, CURLOPT_POSTFIELDS, $data_string);
  curl_setopt($ch, CURLOPT_HTTPHEADER, $httpHeader);
}

curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, true );
curl_setopt( $ch, CURLOPT_HEADER, true );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );

curl_setopt( $ch, CURLOPT_USERAGENT, $_GET['user_agent'] ? $_GET['user_agent'] : $_SERVER['HTTP_USER_AGENT'] );


list( $header, $contents ) = preg_split( '/([\r\n][\r\n])\\1/', curl_exec( $ch ), 2 );

$status = curl_getinfo( $ch );

curl_close( $ch );

// Set the JSON data object contents, decoding it from JSON if possible.
$decoded_json = json_decode( $contents );
$data['contents'] = $decoded_json ? $decoded_json : $contents;

// Generate appropriate content-type header.
$is_xhr = strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
header( 'Content-type: application/' . ( $is_xhr ? 'json' : 'x-javascript' ) );

// Get JSONP callback.
$jsonp_callback = $enable_jsonp && isset($_GET['callback']) ? $_GET['callback'] : null;

// Generate JSON/JSONP string
$json = json_encode( $data );

print $jsonp_callback ? "$jsonp_callback($json)" : $json;

that code is copypasted from the original php, but it's only part of the code. It illustrates the solution.

Answer 5

As @Manolo said the way to go is using CORS (you can see more details here: http://blogs.mulesoft.org/cross-domain-rest-calls-using-cors/ - DISCLAIMER: I wrote that article, but to not make this answer a self promotion, you can search for CORS and you'll find similar articles).

The only thing that I could add to Manolo response is that if you use jQuery you don't have to worry about IE's XDomainRequest, because jQuery takes account of those browser compatibility details.

Also since you are using Restlet, this article will be helpful: http://kodemaniak.de/2010/07/cross-domain-ajax-with-restlet-and-jquery/

I never worked with Restlet, but since is Java based, other simple option to add CORS is to create or use a Filter, here is one Apache license filter implementation: https://bitbucket.org/thetransactioncompany/cors-filter/src