Fixing Cross-Domain Requests in IE8

Question

I'm trying to modify some existing code that is breaking in IE8. From what I've read online, this is a common problem involving XDomainRequest and XMLHttpRequest.

I've not worked with AJAX in this fashion before, so I'm at a compete loss of what to do here. The code is as follows: (I've replaced sensitive information in brackets "[[" and "]]" with arbitrary variable names to identify where each one is used):

jQuery(document).ready(function() {

    var base_url = '[[BASE_URL_1]]';   // DTRT for ajax requests (CORS over HTTP by default)
    if (document.location.protocol == "https:") {
        base_url = '[[BASE_URL_2]]';    // The proxy script that lets us do secure cross-domain AJAX requests
    }
    var classSpec = '$class_spec';

    $('#[[ID_1]]').empty().addClass('loading'); // loading gif
    $('#[[ID_2]]').empty().addClass('loading');

    $.ajax( {
         type: "GET",
          url: base_url + '[[URL_1]]' + classSpec + '[[URL_2]]',
      success: function (data) { $('[[ID_2]]').html(data).removeClass('loading'); }
    } );

    $.ajax( {
         type: "GET",
          url: base_url + '[[URL_1]' + classSpec + '[[URL_3]]',
      success: function (data) { $('[[ID+1]]').html(data).removeClass('loading'); initialize(); }
    } );

});

How can I modify this code to include support for IE8?

Answer 1

To do cross domain requests you will probably need to check the following

1. jQuery.support.cors = true;
2. crossDomain = true;
   • http://api.jquery.com/jQuery.ajax/
3. Access-Control-Allow-Origin headers
   • http://msdn.microsoft.com/en-us/library/dd573303%28v=vs.85%29.aspx
   • https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

1 & 2

jQuery(document).ready(function() {

    var base_url = '[[BASE_URL_1]]';   // DTRT for ajax requests (CORS over HTTP by default)
    if (document.location.protocol == "https:") {
        base_url = '[[BASE_URL_2]]';    // The proxy script that lets us do secure cross-domain AJAX requests
    }
    var classSpec = '$class_spec';

    $('#[[ID_1]]').empty().addClass('loading'); // loading gif
    $('#[[ID_2]]').empty().addClass('loading');

    jQuery.support.cors = true;
    $.ajax(
    {
        crossDomain: true,
        type: "GET",
        url: base_url + '[[URL_1]]' + classSpec + '[[URL_2]]',
        success: function (data) { $('[[ID_2]]').html(data).removeClass('loading'); }
    } );

    $.ajax(
    {
        crossDomain: true,
        type: "GET",
        url: base_url + '[[URL_1]' + classSpec + '[[URL_3]]',
        success: function (data) { $('[[ID+1]]').html(data).removeClass('loading'); initialize(); }
    } );
});

3) Actually requires you to have access to the server you want to talk to. Basically the distant server says to the browser: Hey i allow these domains to do XDR requests, if you are not one of them ..please don't send any. (personally this is the craziest security scenario i have ever seen ..since it's up to the requester, to refrain itself from making requests to domains that don't want requests from him. That really sounds secure, hein !).

So if you are on server site1.com and want to XDR to site2.com, then site2.com must return a header like

Access-Control-Allow-Origin: *

or

Access-Control-Allow-Origin: site1.com

When working with IIS servers, you will probably also need to supply: Access-Control-Allow-Methods

---

The above normally applies to ALL browsers, not just IE8, for IE8 specifics have a look here: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

Answer 2

I recommend trying out this library: https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest which

Implements automatic Cross Origin Resource Sharing support using the XDomainRequest object for IE8 and IE9 when using the $.ajax function in jQuery 1.5+"

It does have the same limitations as XDomainRequest namely:

In order to use XDomainRequest in Internet Explorer, the request must be:

• Only GET or POST
  • When POSTing, the data will always be sent with a Content-Type of text/plain
• Only HTTP or HTTPS
  • Protocol must be the same scheme as the calling page
• Always asynchronous

It looks like you are checking for matching protocols so you should be covered there.