2014-10-10 3 views
6

In IE8 und 9 ich folgende JavaScript-Fehler bin immer, wenn ich einen CORS WebAPI Anruf mache:IE9, IE8 mit AngularJS CORS gibt „Zugriff verweigert“ - ASP.NET WebAPI

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

I gesetzt up my WebAPI wie hier beschrieben http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

So ist die WebAPI enthält:

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

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


    }); 

Der obige Code/WebAPI Arbeiten mit Chrom und IE 10. IE10 druckt ruft:

SEC7118: XMLHttpRequest für http://webapi.com/api/controller/getactionmethod/ erforderlich Cross-Origin Resource Sharing (CORS). SEC7119: XMLHttpRequest für http://webapi.com/api/controller/getactionmethod/ erforderlich CORS Preflight.

Ich bin wirklich fest und weiß nicht, was ich sonst noch versuchen kann. Irgendwelche Ideen?

+0

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

+1

Ich benutze angularjs nicht jQuery. – Briefkasten

+2

IE8 und IE9 unterstützen den Standard CORS XHR nicht. Siehe meine Antwort auf diese Frage für weitere Informationen http://stackoverflow.com/questions/25141650/xdomainrequest-vs-xmlhttprequest – MrCode

Antwort

2

AngularJS v1.2.23 unterstützt keine CORS-Anforderungen für IE8 oder IE9. Aber IE8/9 unterstützt CORS begrenzt mit dem XDomainRequest-Objekt. Siehe auch http://msdn.microsoft.com/en-us/library/ie/cc288060(v=vs.85).aspx

ich die AngularJS lib wie descriped hier http://samuellam.wordpress.com/2013/08/03/ie-89-cors-support-in-angular-js/

zu ändern versucht, aber ich bemerkte ich nicht mit der XDomainRequest einem benutzerdefinierten Header anfordert senden kann. Also habe ich das Projekt auf dem gleichen Rechner mit den gleichen ips bereitgestellt, was für IE8 und 9 funktioniert, was eigentlich nur ein Workaround ist.

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

2

hatte ich das gleiche Problem mit IE8/9 (Django Backend anstelle von ASP.NET), wenn CORS-Anfragen zu tun.

Es gibt mehrere Möglichkeiten, dieses Problem zu lösen. Die einfachste und schnellste Lösung für mich war die Verwendung des Polyfill von jpillora. Mit diesem Polyfill wird normales CORS XMLHttpRequests für XDR auf IE8/9 ausgetauscht.

Fügen XHook und fügen Sie folgende Punkte, bevor Haken auf Ihrer Website:

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

Es gibt mehrere andere Lösungen:

Verwandte Themen