Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

XDomainRequest (CORS) for XML causing "Access is denied" error in IE8 / IE9

Apologies if this appears to be a duplicate but I cannot see a clear answer to any of the similar questions.

When trying to do a CORS request for some XML I continually get an "Access is denied" JS error from IE8.

My code is adapted from this example:

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
  return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
  // All HTML5 Rocks properties support CORS.
  var url = 'http://updates.html5rocks.com';

  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    alert('CORS not supported');
    return;
  }

  // Response handlers.
  xhr.onload = function() {
    var text = xhr.responseText;
    var title = getTitle(text);
    alert('Response from CORS request to ' + url + ': ' + title);
  };

  xhr.onerror = function() {
    alert('Woops, there was an error making the request.');
  };

  xhr.send();
}

from http://www.html5rocks.com/en/tutorials/cors/

This should work in IE8 using XDomainRequest, and when I load the example page and click "Run sample" on the html5rocks page, it works in IE8. However, as soon as I copy the code to my own page and run, I get the "Access is denied" error on the xhr.open() line inside XDomainRequest.

This one has me really baffled - the server is definitely set up correctly so it's something to do with the frontend. Thanks in advance to anyone who can help!

like image 514
tripRev Avatar asked Dec 17 '13 01:12

tripRev


1 Answers

OK, the problem was down to weirdnesses in IE8 & 9 which were solved with a few suggestions from this article: http://cypressnorth.com/programming/internet-explorer-aborting-ajax-requests-fixed/ (mainly setting some blank handler functions and wrapping the .send() in a 0 timeout).

Here's my final code which works in ie8/9/10/11 & FF/Chrome:

function doRequest(url) {

    // Create the XHR object.
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // XHR for Chrome/Firefox/Opera/Safari.
        xhr.open('get', url, true);
    }else if(typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open('get', url);
    }else{
        // CORS not supported.
        xhr = null;
    };

    if (!xhr) {
        return;
    };

    // Response handlers.
    xhr.onload = function() {
        //do what you want with the response. Remember to use xhr.responseText for ie8 compatibility, because it doesn't have .responseXML
        if(xhr.responseXML) {
            xml = this.responseXML;
        }else if(xhr.responseText){
            xml = new ActiveXObject('Microsoft.XMLDOM');
            xml.loadXML(xhr.responseText);
        };
    };

    xhr.onerror = function() {
        //do what you want on error
    };

    //these blank handlers need to be set to fix ie9 http://cypressnorth.com/programming/internet-explorer-aborting-ajax-requests-fixed/
    xhr.onprogress = function () { };
    xhr.ontimeout = function () { };

    //do it, wrapped in timeout to fix ie9
    setTimeout(function () {
                xhr.send();
            }, 0);

};
like image 189
tripRev Avatar answered Sep 28 '22 08:09

tripRev