CORS + Angularjs + Bearer Token + WebApi的问题

时间:2014-06-10 16:30:02

标签: angularjs iis cors

我在尝试使用angular连接到webapi时遇到问题。 我整天都在阅读有关不同问题和可能的解决方案,但仍然无法使其发挥作用。

我正在做的事情:

服务器端,我在web.config上设置了这个

<system.webServer>    
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="http://localhost:53775" />
            <add name="Access-Control-Allow-Headers" value="accept, authorization, user" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, OPTIONS" />
            <add name="Access-Control-Allow-Credentials" value="true" />      
        </customHeaders>
    </httpProtocol>
</system.webServer>

哪个会在响应中发送正确的标题,如下所示

从棱角分明的一面:

我配置我的应用

dashboardApp.config(function($ sceDelegateProvider,$ httpProvider){

$httpProvider.defaults.useXDomain = true;

$sceDelegateProvider.resourceUrlWhitelist([
  'self',      
  'http://localhost:50561/**']);

});

最后我从localhost:53775(mvc app)查询到localhost:50561(webapi)

var url = webStorage.get('webapi');
var deferred = $q.defer();
$http.get(url, {
    withCredentials: true,
    headers: {
        'Authorization': 'Bearer ' + webStorage.get('token'),
        'User': webStorage.get('user')
    }}).success(deferred.resolve)
    .error(deferred.reject);

return deferred.promise;

Chrome和Firefox的结果如下:

Remote Address:127.0.0.1:8888
Request URL:http://localhost:50561/api/Values
Request Method:OPTIONS
Status Code:400 Bad Request
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,es-419;q=0.6,es;q=0.4
Access-Control-Request-Headers:accept, authorization, user
Access-Control-Request-Method:GET
Cookie:__utma=1.957086229.1399375527.1401957296.1401963654.14; __utmz=1.1399375527.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); ASP.NET_SessionId=034dzycm0wtqagt1ftihfwje;.ASPXAUTH=B654AD08FADA17AF59A3C57C883D1E33720A7874F5F0155A65DDA202AAA296DE08E8A1ED5F3D6729B9C8D69AF1DB584300E6D9136E410F717801051E805F1A1AB0D28245917E7482E232EBD807BF007C48609B8347FC9812D4695C57722498B0545CFE9257C001245566C46D5EABC00043B822AEB031526B18CB338214CAB7ACC7D4262183B2B8A742FA115447124D34; XSRF-TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzZWxmIiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDo1MDU2MSIsIm5iZiI6MTQwMjQxNzA3NiwiZXhwIjoxNDAyNDE3MTk2LCJ1bmlxdWVfbmFtZSI6Im9wdGlvcCIsInJvbGUiOiJvcHRpb3AifQ.9T6sgI9Mv6YAWT8pDW4TDBhlWZoEFmIRLV0dh7rRpBU
Host:localhost:50561
Origin:http://localhost:53775
Proxy-Connection:keep-alive
Referer:http://localhost:53775/DashBoard
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36


Response Headers  view source

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:accept, authorization, user
Access-Control-Allow-Methods:GET, POST, PUT, OPTIONS
Access-Control-Allow-Origin:http://localhost:53775
Cache-Control:no-cache
Content-Length:65
Content-Type:application/json; charset=utf-8
Date:Tue, 10 Jun 2014 16:18:10 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcV29ya3NwYWNlXEdpdGh1YlxkYXJpb2dyaWZmb1xvcHRpb3BcU2VydmljZXNcV2ViQXBpXGFwaVxFdmFsdWF0aW9uc1xHZXRQZXJmb3JtZWRFdmFsdWF0aW9uc1wzNg==?=

现在,我完全没有想法,因为iisexpress正在使用CORS的requeried字段发送响应。

1 个答案:

答案 0 :(得分:4)

我猜你已经启用了CORS属性,你不需要web.config

上的自定义标题
      public static class WebApiConfig
      {
          public static void Register(HttpConfiguration config)
          {

      var enableCorsAttribute = new EnableCorsAttribute("http://yourdomain.com",
                                               "Origin, Content-Type, Accept",
                                               "GET, PUT, POST, DELETE, OPTIONS");
      config.EnableCors(enableCorsAttribute);