Why does this cross-domain request work in other browsers but not IE9?

Question

I have some Ajax code that is working in Safari, Chrome and Firefox but not in IE9.

The page is on http://foo.com/test.aspx and it's making an AJAX request to a webservice hosted on https://service.foo.com. I thought I wouldn't have any cross-domain issues but given IE9 is blocking it, it appears that I do :(

var tempUrl = "https://service.foo.com/dummy.svc/test?hi=bye";
$.get(tempUrl, "html");

As I mentioned, the code works in the other 3 browsers, just not IE9. (I'm only concerned about IE9, not IE8 or older).

I did some digging and found this article on MSDN that says:

Cross-domain requests require mutual consent between the Web page and the server. You can initiate a cross-domain request in your Web page by creating an XDomainRequest object off the window object and opening a connection to a particular domain. The browser will request data from the domain's server by sending an Origin header with the value of the origin. It will only complete the connection if the server responds with an Access-Control-Allow-Origin header of either * or the exact URL of the requesting page. This behavior is part of the World Wide Web Consortium (W3C)'s Web Application Working Group's draft framework on client-side cross-domain communication that the XDomainRequest object integrates with.

Before I go down the path of using XDR I wanted to verify with people smarter than me whether this is the right approach or not.

1. Add Response.AddHeader("Access-Control-Allow-Origin", "*"); to my page
2. Create condition jscript code that detects IE9 and uses XDR instead of the regular jquery call I'm using with $.get.

Am I totally off or is this the right way to go about this?

(Assuming it's the right way to go, where does the Acecss-Control-Allow-Origin response header go -- on my page at http://foo.com/test.aspx or on the webservice at https://service.foo.com?)

Answer 1

Instead of $.ajax(), use this custom code:

function newpostReq(url,callBack)
{
    var xmlhttp;
    if (window.XDomainRequest)
    {
        xmlhttp=new XDomainRequest();
        xmlhttp.onload = function(){callBack(xmlhttp.responseText)};
    }
    else if (window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();
    else
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            callBack(xmlhttp.responseText);
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

Note: this works for GET requests.

To adapt it on POST requests change the following lines:

function newpostReq(url,callBack,data)

data is the URL encoded parameters of the post requests such as : key1=value1&key2=value%20two

    xmlhttp.open("POST",url,true);
    try{xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");}catch(e){}
    xmlhttp.send(data);

To summarize, open the connection as POST request (Line 1), set the request header for urlencoded type of the post data (wrap it with try-catch for exceptional browsers) (Line 2), then send the data (Line 3).

Answer 2

i just wrestled with the same problem.

php backend, right mime and yes,

header('Access-Control-Allow-Origin: *');

worked in almost* every browser - except IE9.

seems like jQuery.getJSON doesn't automatically do XDR for ie9 - after creating a service proxy on the same domain, it worked.

* almost - opera acts up too.

edit: okay, opera did have the same problem as ie9. works like a charm now.

note: chrome, safari and the firefoxes (3.6-5) had no problem with the cross domain requests with ACAO:*.

what i don't understand is why a) microsoft uses a different object for cross domain requests and b) why jquery doesn't switch transparently (or at least provide an option to choose).