6

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?)

2
  • Generally speaking, JQuery is aware of browsers' same-origin restrictions and shouldn't be trying to use CORS in browsers that don't support it. Do you see script errors in IE9's F12 Developer Tools console?
    – EricLaw
    Jun 23, 2011 at 3:49
  • Eric, no errors thrown in the dev tools console.
    – TMC
    Jun 23, 2011 at 7:45

3 Answers 3

10

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).

2
  • 1
    Yes it is working perfectly with GET requests, but what Should I do for POST requests in IE8 & IE9
    – Surya
    Jul 19, 2014 at 10:34
  • If I want to do for POST request what should I do, I am using CORS in my service and need to send JSON data using POST request in IE8 & IE9
    – Surya
    Jul 19, 2014 at 13:43
1

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).

0

If this works in the other browsers (which support CORS), then your SVC seems to already be supporting this, but to be sure, use Fiddler2 to see what is going on.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.