javascript - Angular.js xhr.open() 抛出 'Access is Denied' 错误

Question

我正在开发一个必须支持 IE10 的 Angular Web 应用程序。我需要跨域调用我们的企业销售人员服务器。在 chrome(我们不正式支持，但我们都在开发)中调用失败，因为 chrome 对不支持 CORS 的 salesforce 服务器进行了 OPTIONS 预检调用。

但是，IE 不会进行 CORS 预检，因此我认为进行此调用不会有任何问题。但是我收到“访问被拒绝”。从 Angular 代码深处抛出的错误。

进一步挖掘表明失败的 Angular (v1.2.21) 中的特定行是:

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

在看github , google groups , 和 stack overflow线程，我发现问题可能出在 IE 想要处理跨域请求的方式上，特别是调用哪个 xhr 对象来进行调用。

似乎旧版本的 angular 有这个问题，但通过在 xhr.open() 调用之前添加一个函数来检索正确的 XMLHttpRequest 来解决这个问题正在运行的 IE 版本的对象:

var xhr = createXhr(method);

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

因此理论上，正确的 xhr 对象正在调用其 .open() 方法。但是对我来说，该行会引发“拒绝访问”错误。

在上面的链接中，似乎通常建议不要使用 XMLHttpRequest 对象进行跨域调用，而必须使用 XDomainRequest()。我认为 angular 的人不太可能错过这个，我还是尝试了一下，只是手动更改 angular.js 文件中的代码，为我们的特定 salesforce 调用返回该对象:

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);
  }
});

除了现在代码尝试调用 xhr.setRequestHeader(key, value) 失败的行。有谁知道问题出在哪里？我很难相信 Angular 无法处理 IE 中的跨域调用，所以我想我只是遗漏了一些东西。

Answer 1

虽然您在这里专门说的是 IE10，但我在 IE8-9 上也遇到了同样的问题。我的解决方案是使用跨域对象 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);
        });
}

编辑:

这是一个更完整的解决方案，其中包括由于 XDR 请求中的错误和“成功时”/“错误时”回调而导致的内存管理:

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);
        });
}