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

Question

I have Ajax code that works in Safari, Chrome and Firefox, but not in IE9.

The page is located at http://foo.com/test.aspx and makes an AJAX request to the web service hosted at https://service.foo.com . I thought that I would not have problems with the cross-domain phenomenon, but if IE9 blocks it, it looks like I: (

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

As I mentioned, the code works in the other three browsers, not in IE9. (I am only concerned about IE9, not IE8 or older).

I did a bit of work and found this article on MSDN that says:

Cross-domain requests require mutual agreement between the web page and the server. You can initiate a cross-domain request on your web page by creating an XDomainRequest object from the window object and opening a connection to a specific domain. The browser requests data from the domain server by sending an Origin header with a start value. It will only end the connection if the server responds with the Access-Control-Allow-Origin header either * or the exact URL of the requesting page. This behavior is part of the World Wide Web Consortium (W3C). Working in a web application. A group diagram of the project on the client side of the cross-domain communication that the XDomainRequest Object integrates with.

Before embarking on the path of using XDR, I would like to check that people are smarter than me, right or wrong.

• Add Response.AddHeader("Access-Control-Allow-Origin", "*"); to my page
• Create jscript condition code that defines IE9 and uses XDR instead of the usual jquery query that I use with $.get .

Am I completely disconnected or is this the right way to do this?

(Assuming this is the right way, where the Acecss-Control-Allow-Origin response header is on my page at http://foo.com/test.aspx or on the https://service.foo.com web service?)

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 configure it for POST requests, change the following lines:

 function newpostReq(url,callBack,data) 

data is the URL-encoded parameters of mail 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 a POST request (line 1), set the request header for the urlencoded type of mail data (wrap it with try-catch for exceptional browsers) (line 2), then send the data (line 3).

Answer 2

I just struggled with the same problem.

php backend, right mime and yes

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

worked almost * in every browser - except IE9.

it seems that jQuery.getJSON does not automatically execute XDR for ie9 - after creating the service proxy in the same domain, it worked.

* almost - opera also acts.

edit: ok, opera had the same problem as ie9. Now works like a charm.

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

that I don’t understand why: a) microsoft uses another object for cross-domain queries and b) why jquery does not switch transparently (or at least provides a choice).

Answer 3

If this works in other browsers (which support CORS), then your SVC seems to already support this, but of course, use Fiddler2 to find out what is happening.

The Access-Control-Allow-Origin header is used on the requested resource, not on the page requesting it.