带有 AngularJS CORS 的 IE9、IE8 返回“访问被拒绝” - ASP.NET WebApi答案

【问题标题】：IE9,IE8 with AngularJS CORS returns “Access is denied” - ASP.NET WebApi带有 AngularJS CORS 的 IE9、IE8 返回“访问被拒绝” - ASP.NET WebApi
【发布时间】：2014-12-05 21:47:37
【问题描述】：

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

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

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

所以 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：http://webapi.com/api/controller/getactionmethod/ 的 XMLHttpRequest 需要跨域资源共享 (CORS)。 SEC7119：http://webapi.com/api/controller/getactionmethod/ 的 XMLHttpRequest 需要 CORS 预检。

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

【问题讨论】：

stackoverflow.com/questions/10232017/…
我使用的是 angularjs 而不是 jQuery。
IE8 和 IE9 不支持标准的 CORS XHR。有关更多信息，请参阅我对这个问题的回答stackoverflow.com/questions/25141650/…
MrCode 是正确的。您需要对旧版浏览器使用 JSONP。 caniuse.com/#search=CORS
除了做 JSONP 请求来解决 IE8/9 中的 CORS 问题，肯定还有其他解决方案

标签： javascript c# angularjs asp.net-web-api

【解决方案1】：

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 库，就像这里描述的 http://samuellam.wordpress.com/2013/08/03/ie-89-cors-support-in-angular-js/

但我注意到我无法通过 XDomainRequest 请求发送自定义标头。所以我最终将项目部署在具有相同 ips 的同一台机器上，这将适用于 IE8 和 9，这实际上只是一种解决方法。

http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

【讨论】：

【解决方案2】：

在执行 CORS 请求时，我遇到了与 IE8/9（Django 后端而不是 ASP.NET）相同的问题。

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

包括 XHook 并在您的网站上添加以下钩子前：

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

还有其他几种解决方案：

【讨论】：