IE9、IE8使用AngularJS CORS时出现“访问被拒绝”错误 - ASP.NET WebApi

Question

IE9、IE8使用AngularJS CORS时出现“访问被拒绝”错误 - ASP.NET WebApi

6

在IE8和9中，当我执行CORS webapi调用时出现以下JavaScript错误：

Error: Access is denied.
{
  [functions]: ,
  description: "Access is denied.",
  message: "Access is denied.",
  name: "Error",
  number: -2147024891
}

我按照这里描述的步骤设置了我的WebApi http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

因此，WebApi 包含：

  public static class WebApiConfig
  {
      public static void Register(HttpConfiguration config)
      {
          config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
      [...]

我的测试 AngularJS 应用：

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng-app="app">
  <head>
      <title>test</title>
      <script src="Scripts/angular.js"></script>
      <script src="app.js"></script>
  </head>
  <body>
      <div ng-controller="testController as vm">
          {{vm.test}}
          {{vm.data}}
      </div>
  </body>
  </html>

app.js:

  var app = angular.module('app');

  app.controller('testController', function ($http) {
      var vm;
      vm = this;

      vm.test = "bla non no ";
      vm.data = null;

      $http.defaults.headers.common['Authorization'] = 'a token'

      return $http({
          method: 'GET',
          data: null,
          url: 'http://webapi.com/api/controller/getactionmethod/',
      }, function (data) {
          console.log("bla");
      }).success(function (data, status, headers, config) {
          console.log("bla a");
          vm.data;
      });


  });

以上的代码/webapi调用适用于Chrome和IE 10。IE10打印：

SEC7118：XMLHttpRequest对http://webapi.com/api/controller/getactionmethod/需要跨域资源共享（CORS）。 SEC7119：XMLHttpRequest对http://webapi.com/api/controller/getactionmethod/需要CORS预检。

我真的卡住了，不知道还能尝试什么。有什么想法吗？

- Briefkasten

https://dev59.com/h2kv5IYBdhLWcg3w9lai - epascarello

1

我正在使用AngularJS而不是jQuery。 - Briefkasten

2

IE8和IE9不支持标准的CORS XHR。有关更多信息，请参见我的答案：https://dev59.com/0F8e5IYBdhLWcg3w_-n0 - MrCode

MrCode是正确的。您需要为旧版浏览器使用JSONP。http://caniuse.com/#search=CORS - Chris Love

肯定有其他解决方案来解决IE8/9中的CORS问题，而不是使用JSONP请求。 - bjunix

2个回答

2

AngularJS v1.2.23不支持IE8或IE9的CORS请求。但是，IE8/9通过XDomainRequest对象支持受限CORS。请参见http://msdn.microsoft.com/en-us/library/ie/cc288060(v=vs.85).aspx。我尝试按照这里所述修改angularjs库，但我注意到我不能使用XDomainRequest发送自定义标头的请求。因此，我最终将项目部署在相同机器上，具有相同的IP地址，这对于IE8和9可以工作，但实际上只是一种解决方法。更多信息请参见这里。

- Briefkasten

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bjunix · Accepted Answer

我在使用 Django 后端而非 ASP.NET 时，在进行跨域请求时也遇到了 IE8/9 的同样问题。

有几种解决方法。对我来说，最简单和最快的解决方案是使用来自jpillora的 polyfill。使用该 polyfill，普通的 CORS XMLHttpRequests 将在 IE8/9 上被替换为 XDR。

请添加 XHook 并在您的网站上添加以下 before-hook：

xhook.before(function(request, callback) {
  //skip browsers that dont use XDR
  if(!window.XDomainRequest)
    return callback();
  //skip requests that aren't cross domain
  var url = request.url;
  var loc = window.location;
  var hostname = loc.hostname + (loc.port ? ":"+loc.port : "");
  if(!/^https?:\/\/([^\?\/]+)/.test(url) || RegExp.$1 === hostname)
    return callback();

  //if not GET, force POST
  var method = request.method;
  if(method !== 'GET') method = 'POST';
  //force same protocol
  url = url.replace(/^https?:/,loc.protocol);
  //request!
  var xdr = new window.XDomainRequest();
  xdr.timeout = request.timeout;
  //proxy events
  var proxy = function(e) {
    xdr['on'+e] = function() {
      request.xhr.dispatchEvent(e);
    };
  };
  var events = ['progress','timeout','error'];
  for(var i = 0; i < events.length; ++i )
    proxy(events[i]);
  //custom onload
  xdr.onload = function() {
    callback({
      status: 200,
      statusText: "OK",
      headers: {
        'Content-Type': xdr.contentType
      },
      text: xdr.responseText
    })
  };
  xdr.open(method, url);
  xdr.send(request.body);
  return
});

有其他几种解决方案：