Cross site calls without 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?

Have you tried [easyXDM](https://github.com/oyvindkinsey/easyXDM)? — xmikex83, Jul 25 '13 at 20:44

score 1 · Answer 1 · answered Sep 19 '13 at 14:35

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.

Manolo Carrasco Moñino · Answer 2 · 2013-07-29T10:59:54.580

0

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.

edited Jul 29 '13 at 10:59

answered Jul 26 '13 at 08:57

Manolo Carrasco Moñino

9,723
1
22
27

1

Thanks for nice response. I was going through the links provided by you and was able to run cross domain request. Now i am thinking, what if server doesn't have the Access-Control-Allow-Origin : *, and i can not change it then what should be done in that case? – vbjain Jul 27 '13 at 12:29
1

In simple words, To make cross site request working using CORS, is it compulsory that server has to send the header, Access-Control-Allow-Origin : * or Access-Control-Allow-Origin : ? What if server does not responsd with this header type? – vbjain Jul 27 '13 at 13:04
In CORS the client makes 2 requests to the server (OPTION and POST/GET/PUT...). To the `doOption` request the server has to answer with `Access-Control-Allow-Origin` `Access-Control-Allow-Methods` and `Access-Control-Allow-Headers` (the last one only if you add any aditional header to your XHR). To the `doPost` it has to add just the `Access-Control-Allow-Origin`. And yes they are mandatory otherwise the client will reject the XHR. – Manolo Carrasco Moñino Jul 29 '13 at 10:57

score 0 · Answer 3 · answered Aug 06 '13 at 14:57

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.

score 0 · Answer 4 · answered Sep 10 '13 at 16:22

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.

score 0 · Answer 5 · answered Sep 14 '13 at 05:31

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

Cross site calls without JSONP

5 Answers5