Angular.js xhr.open() throws 'Access is Denied' error

Question

I'm working on an angular web application that must support IE10. I need to make a cross domain call to our enterprise salesforce server. In chrome (which we don't support officially, but we all develop in) that call fails because chrome makes that OPTIONS preflight call to the salesforce server, which does not support CORS.

However, IE does not make a CORS preflight, so I assumed I would have no problems making this call. But I get an "Access is Denied." error thrown from deep inside the angular code.

Further digging reveals that the specific line in angular (v1.2.21) that is failing is:

xhr.open(method, url, true); (on line 8544 if you happen to have version 1.2.21).

In looking at github, google groups, and stack overflow threads, I see that the issue might be with the way IE wants to handle cross domain requests, specifically which xhr object is being invoked to make the call.

It seems that older versions of angular had this issue, but it was addressed by adding a function prior to the xhr.open() call to retrieve the correct XMLHttpRequest object for the version of IE that is running:

var xhr = createXhr(method);

xhr.open(method, url, true);
forEach(headers, function(value, key) {
  if (isDefined(value)) {
      xhr.setRequestHeader(key, value);
  }
});

So in theory, the correct xhr object is having its .open() method called. However for me, that line throws an "Access is Denied" error.

In the links above, it seems commonly suggested that instead of using the XMLHttpRequest object for cross domain calls, you have to use XDomainRequest(). Thinking it was unlikely that the angular folks missed this, I tried it anyway, just manually altering the code in the angular.js file to return that object for our specific salesforce call:

var xhr;
if (url.indexOf("salesforce.com") > -1) {
  xhr = new XDomainRequest();
}
else {
  xhr = createXhr(method);
}

xhr.open(method, url, true);
forEach(headers, function(value, key) {
  if (isDefined(value)) {
      xhr.setRequestHeader(key, value);
  }
});

Except now the line where the code tries to call xhr.setRequestHeader(key, value) fails. Does anyone know what the problem is? I have a hard time believing angular doesn't have a way to deal with cross domain calls in IE, so I imagine I'm just missing something.

Answer 1

While you specifically say IE10 here, I was having this same exact problem with IE8-9. My solution was to use the cross domain object window.XDomainRequest.

function loadCaptions() {

    //Use the XDomainRequest if it is defined (IE8-10), or when angular calls .open on the xhr request will receive "access denied" error.
    var url = $scope.captionsUrl;
    if (!!window.XDomainRequest) {
        var xdr = new window.XDomainRequest();
        if (xdr) {
            xdr.open("get", url);
            xdr.send();
        }

        return;
    }


//You folks on stackoverflow can ignore this part, just left in to show how I was requesting the captions leading to "access denied"
    $http.get($scope.captionsUrl)
        .success(function (captionsJson) {
            $scope.captionsList = captionsJson;
            createCaptionsMap();
        })
        .error(function (data, status, headers, config) {
            $cbtErrors.failedToLoadCaptions($scope.captionsUrl);
        });
}

EDIT:

Here is a more complete solution that includes memory management due to a bug in XDR requests and "on success"/"on error" call backs:

function loadCaptions() {
    //Use the XDomainRequest for IE8-9, or angular get request will recieve "access denied" error.
    var url = $scope.captionsUrl;

    if (!!window.XDomainRequest) {
        var xdr = new window.XDomainRequest();
        //See explination below why global.pendingXDR is set.  Cleaning up that memory here.
       var removeXDR = function(xdr) {

            //You will need a indexOf function defined for IE8.  See http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8.
            var index = global.pendingXDR.indexOf(xdr);
            if (index >= 0) {
                global.pendingXDR.splice(index, 1);
            }
        };

        if (xdr) {
            //bind xdr.onload before sending the request (or the event does nothing).
            xdr.onload = function(){
                removeXDR(xdr);
                $scope.captionsList = xdr.responseText;
                createCaptionsMap();
            };
            xdr.onerror = function(){
                removeXDR(xdr);
                $cbtErrors.failedToLoadCaptions($scope.captionsUrl);
            };
            xdr.open("get", url);
            xdr.send();

            //In Internet Explorer 8/9, the XDomainRequest object is incorrectly subject to garbage collection after
            //send() has been called but not yet completed. The symptoms of this bug are the Developer Tools'
            //network trace showing "Aborted" for the requests and none of the error, timeout, or success event
            //handlers being called.
            //To correctly work around this issue, ensure the XDomainRequest is stored in a global variable until
            //the request completes.
            global.pendingXDR = [];
            global.pendingXDR.push(xdr);

        }

        return;
    }


//You folks on stackoverflow can ignore this part, just left in to show how I was requesting the captions leading to "access denied"
    $http.get($scope.captionsUrl)
        .success(function (captionsJson) {
            $scope.captionsList = captionsJson;
            createCaptionsMap();
        })
        .error(function (data, status, headers, config) {
            $cbtErrors.failedToLoadCaptions($scope.captionsUrl);
        });
}