2014-10-10 141 views
6

在IE8和9我收到的時候我做了CORS的WebAPI調用下面的JavaScript錯誤:IE9,IE8與AngularJS CORS返回「訪問被拒絕」 - ASP.NET的WebAPI

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鉻和IE 10. IE10打印作品:

SEC7118:XMLHttpRequest進行http://webapi.com/api/controller/getactionmethod/需要跨源資源共享(CORS)。 SEC7119:XMLHttpRequest的http://webapi.com/api/controller/getactionmethod/需要CORS預檢。

我真的被卡住了,不知道我可以試試其他的東西。有任何想法嗎?

+0

http://stackoverflow.com/questions/10232017/ie9-jquery-ajax-with-cors-returns-access-is-denied – epascarello 2014-10-10 16:48:53

+1

我使用的是angularjs而不是jQuery。 – Briefkasten 2014-10-10 16:50:04

+2

IE8和IE9不支持標準的CORS XHR。看到我對這個問題的答案更多信息http://stackoverflow.com/questions/25141650/xdomainrequest-vs-xmlhttprequest – MrCode 2014-10-10 16:57:35

回答

2

AngularJS v1.2.23不支持IE8或IE9的CORS請求。 但IE8/9支持CORS與XDomainRequest對象限制。又見http://msdn.microsoft.com/en-us/library/ie/cc288060(v=vs.85).aspx

我試圖修改angularjs LIB喜歡這裏descriped 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 
}); 

有幾種其他的解決方案: