Cross-site AJAX requests

Question

I need to make an AJAX request from a website to a REST web service hosted in another domain.


Althouht this is works just fine in Internet Explorer, other browsers such as Mozilla and Google Chrome impose far stricter security restrictions, which prohibit cross-site AJAX requests.

My problem is that I have no control over the domain nor the web server where the site is hosted. This means my REST web service must run somewhere else, and I can't put in place any redirection mechanism.
Here is the JavaScript code that makes the asynchronous call:

var serviceUrl = "http://myservicedomain";
var payload = "<myRequest><content>Some content</content></myRequest>";
var request = new XMLHttpRequest();
request.open("POST", serviceUrl, true); // <-- This fails in Mozilla Firefox amongst other browsers
request.setRequestHeader("Content-type", "text/xml");
request.send(payload);

How can have this work in other browsers than just Internet Explorer?

Answer 1

maybe jsonp can help.

NB youll have to change your messages to use json instead of xml

Edit

Major sites such as flickr and twitter support jsonp with callbacks etc

Answer 2

The fact that this works in IE is a security issue with IE, not a feature.

Unfortunately cross-site scripting is prohibited, and the accepted work around is to proxy the requests through your own domain: do you really have no ability to add or modify server side code?

Furthermore, the secondary workaround - involving the aquisition of data through script tags - is only going to support GET requests, which you might be able to hack with a SOAP service, but not so much with the POST request to a RESTful service you describe.

I'm really not sure an AJAX solution exists, you might be back to a <form> solution.

Answer 3

Have you tried posting to an IFrame ?

Answer 4

This post could be helpful for you.

Edit(Adam): Post was linked incorrectly, but points to a blank page anyway. Here's a more useful post on Firefox's implementation of the W3C "Access Control For Cross Site Requests."

Answer 5

The not very clear workaround (but works) is using iframe as container for requests to another sites. The problem is, the parent can not access iframe's content, can only navigate iframe's "src" attribut. But the iframe content can access parent's content.

So, if the iframe's content know, they can call some javascript content in parent page or directly access parent's DOM.

EDIT: Sample:

function ajaxWorkaroung() {
    var frm = gewtElementById("myIFrame")
    frm.src = "http://some_other_domain"
}
function ajaxCallback(parameter){
    // this function will be called from myIFrame's content
}

Answer 6

The post marked as the answer is erroneous: the iframes document is NOT able to access the parent. The same origin policy works both ways.

The fact is that it is not possible in any way to consume a rest based webservice using xmlhttprequest. The only way to load data from a different domain (without any framework) is to use JSONP. Any other solutions demand a serverside proxy located on your own domain, or a client side proxy located on the remote domain and som sort of cross-site communication (like easyXDM) to communicate between the documents.