jQuery - How to remove cross domain limitation [duplicate]

I am working on an web app for mobile, and jsonp is pretty cool for cross-domain request, but the API of server didn't support callback parameter. So I just can use json to fetch data from remote server.

I tried json in jQuery, seems it doesn't support cross-domain request. I tried raw ajax request function on safari, and it works good on cross-domain, so can I remove the limitation of cross-domain for json request in jQuery? (not jsonp, only json), and how to do it?

Or is there any alternative simple ajax library (cross-web browser) and can do json on cross-domain request.

Solution 1:

Same Origin Policy

You are attempting to circumvent the Same Origin Policy. It is built into every browser and is not normally something you can or should want to disable/workaround/etc. It is a very important security contract between your site, the user, and the user's browser.

CORS (possible)

CORS allows your web server to tell browsers/clients that access to another domain is permissible. This is done by having the following HTTP header output by your web server

 Access-Control-Allow-Origin: http://www.example.com

If you can not control your HTTP Headers, then you can not use CORS. Implementation of this is language/framework specific.

Please note that you should check to ensure browser compatibility as IE8/9 had limited support. Also be aware that this is a potential attack vector. It allows responses from 3rd party sites to execute XSS attacks if you use the response data irresponsibly.

JSONP(possible)

JSONP is a clever way to pass and fetch data between servers by dynamically adding a script tag with a src atrribute equal to "yoururl.com?<your parameter data>" to your page. It is the only legitimate way to accomplish such a feat without a web proxy (see below) or an applet (Flash/Java). However it does have its own security risks if you are not the provider of both ends of the request. Remember that JSONP allows the remote server to execute code within your context and you should be very careful who you give that power to.

"Vanilla" AJAX (not possible)

If you are not using the JSONP to fetch data then you are most likely attempting to use an AJAX request to fetch data. AJAX requests are also subjected to the Same Origin Policy. JavaScript libraries (e.g. jQuery, Prototype, Dojo, etc) can not circumvent this policy as base behavior for an Ajax Request. They can, however, support JSONP (which remember now, is not AJAX).

AJAX w/ Web Proxy (possible)

If you do want to request data from another server, you can forward your request. Your main site's server will be acting as a proxy. You will need to make an AJAX request to your own server, that server side code will then make a request to the other domain and then send the response to your script via the AJAX calls response.

This is a common pattern and it is detailed here as the Web Proxy Pattern and a pricture friendly Yahoo one here (but remember it's Yahoo specific, just take the general idea). It is however, server side language dependent. The overall implementation will be the same, however the code to do so will vary based on your server side language of choice (PHP, Ruby, Python, C, etc). Some languages will already have libraries/modules/etc to support such a pattern.

Flash (possible, non-default)

Flash in its default state does not support cross domain requests. It can be turned on in Flash7+ with cross-domain policy files, but is highly suggested against. Your script would have to interface w/ a Flash API wich would make the requests and return the data to your JavaScript.

Java Applet (possible, non-default)

Java is also subjected to the same origin policy, but has a similar work around to Flash as described here on its release.

Various other "hacks"

There are other hacks out there, but they generally require you to control both ends or have an agreed upon standard for communication. For example the 'window.name' hack. I don't suggest most of these methods.

Other Solutions

Another question similar to this has been asked. It outlines a few other methods that I did not cover: Ways to circumvent the same-origin policy

The Best Solutions

1. CORS - if you trust the 3rd party
2. Web Proxy - if you don't

A web proxy on your own domain can allow you to sanitize the data being retrieved, it offers your user's the most protection. However, if you do zero sanitation it is no more secure than any of the methods outlined here. If you do implement a web-proxy of some kind, make sure its requests are limited to and from the sites you wish. Else you will essentially be creating an open proxy, which could be abused by users if discovered and get you into legal trouble.

Solution 2:

I had the same issue. Trying to get json from a server to wich I dind't had access (=> no JSONP).

I found http://benalman.com/projects/php-simple-proxy/ Add the php proxy to your server and do the ajax call to this file. "Any GET parameters to be passed through to the remote URL resource must be urlencoded in this parameter."

$.ajax({
   type: 'GET',
   url:'proxy.php?url=http://anyDomain.com?someid=thispage',
   dataType: "json",
   success: function(data){
      // success_fn(data);
   },
   error: function(jqXHR, textStatus, errorThrown) {
      // error_fn(jqXHR, textStatus, errorThrown);
   }
});

where proxy.php (the file from Ben Alman) is hosted in your domain

Alternative (which I found to be second best to this): http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/