ASP.NET Web API CORS不能与AngularJS一起使用

Question

我有一个在某个端口上本地运行的ASP.NET Web API,我有一个在8080上运行的angularjs应用程序.我想从客户端访问api.

我可以成功登录并注册我的应用程序,因为在我的OAuthAuthorizationProvider中显式设置/ Token端点中的repsonse标头.

    public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
    {
        context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });

非常好.但是,我的其他API方法似乎不起作用.在我的WebApiCongig.Register中,我启用了CORS,我将EnableCors属性添加到我的控制器,以允许所有来源,所有标题和所有方法.我可以在控制器上的get方法中设置一个断点,它就可以了.这是我在chrome中观看网络选项卡的内容.

2个请求被发送到相同的api方法.一种方法类型为OPTIONS,另一种方法类型为GET.OPTIONS请求标头包括这两行

Access-Control-Request-Headers:接受,授权

访问控制请求-方法:GET

响应包括这些行

访问控制允许报头:授权

访问控制允许来源:*

但是,GET方法请求看起来很不一样.它返回ok状态代码为200,但它不会包含和访问请求或响应中的控制头.就像我说的那样,它可以很好地击中API.我甚至可以做一个POST并保存到数据库,但客户抱怨响应!!

我已经查看了每一个SO问题,并尝试了各种启用cors的组合.我正在使用Microsoft.AspNet.Cors版本5.2.2.我正在使用AngularJS 1.3.8版.我也使用$ resource服务而不是$ http,这似乎也没有什么区别.

如果我能提供更多信息,请告诉我.

顺便说一下,我可以通过简单地包含Bearer令牌来使用Fiddler和/或Postman访问Web API.

Answer 1

您似乎没有处理预检Options 请求.

Web API需要响应Options请求以确认它确实配置为支持CORS.

要处理这个问题,您需要做的就是发送一个空响应.您可以在您的操作中执行此操作,也可以像以下一样全局执行此操作:

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}

添加了此额外检查以确保不会被利用的旧APIs的设计为仅接受GET和POST请求.想象一下,当这个动词不存在时,DELETE向API设计者发送请求.结果是不可预测的,结果可能是危险的.

另外,我建议通过web.config而不是使用Cors来启用Corsconfig.EnableCors(cors);

这可以通过在<system.webServer>节点内添加一些自定义标头来完成.

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
 </httpProtocol>

请注意,方法都是单独指定的,而不是使用*.这是因为使用时发生了错误*.