IE9,IE8与AngularJS CORS返回“访问被拒绝” - ASP.NET WebApi

时间:2014-10-10 16:46:45

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

在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 App:

  <!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预检。

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

2 个答案:

答案 0 :(得分: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 lib,就像这里描述的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

答案 1 :(得分:2)

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

有几种方法可以解决这个问题。对我来说,最简单,最快速的解决方案是使用jpillora中的polyfill。使用此polyfill,将在IE8 / 9上交换正常的CORS XMLHttpRequests用于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
});

还有其他几种解决方案: