ASP.NET Web API CORS 不适用于 AngularJS答案

【问题标题】：ASP.NET Web API CORS not working with AngularJSASP.NET Web API CORS 不适用于 AngularJS
【发布时间】：2015-02-21 18:34:52
【问题描述】：

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

我可以成功登录并注册我的应用程序，因为在我的 OAuthAuthorizationProvider 中明确设置了 /Token 端点中的响应头。

    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，这似乎也没有什么不同。

如果我能提供更多信息，请告诉我。

顺便说一句，我可以使用 Fiddler 和/或 Postman 访问 Web API，只需包含 Bearer 令牌。

【问题讨论】：

所以你的意思是它与邮递员/提琴手一起工作，而不是与角度合作
正确。我不确定它是否有角度，因为它是浏览器强制执行跨源请求。
你在你的 ngapp.config myApp.config(function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; });987654322@中完成了这些设置
是的。但从我读到的内容来看，这些需要包含在旧版浏览器支持中。
通过使用 --disable-web-security 选项运行 chrome 来尝试它，如果它在 fiddler 中工作，它应该与上述设置一起工作，请确保您看到说明 web-security 已禁用的通知

标签： c# asp.net angularjs asp.net-web-api

【解决方案1】：

就我而言，在我将 IIS 下的 AppPool 的 Identity 选项从 ApplicationPoolIdentity 更改为 NetworkService 后，CORS 在我的应用程序中停止工作。

【讨论】：

【解决方案2】：

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

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

要处理这个问题，您需要做的就是发回一个空响应。您可以在您的操作中执行此操作，也可以像这样在全局范围内执行此操作：

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

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

我还建议通过 web.config 而不是 config.EnableCors(cors);

启用 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>

请注意，方法都是单独指定的，而不是使用*。这是因为使用*时出现了一个bug。

【讨论】：

这没有帮助。稍后我会发布答案。
它确实有效，因为它已经为成千上万的人工作了。您可能只是忘记包含一件或另一件。
我不怀疑！然而，尽管对于开发人员来说很谦虚，但我不得不向 asp 支持提交一张票。他们也想不通！这让我感觉好一点。我们实施了我发布的解决方案并且它有效。现在在 corspolicy 中读取 asterics 可能存在错误。

【解决方案3】：

这最终是一个简单的修复。很简单，但它仍然无法消除我额头上的瘀伤。似乎越简单，越令人沮丧。

我创建了自己的自定义 cors 策略提供程序属性。

public class CorsPolicyProvider : Attribute, ICorsPolicyProvider
{
    private CorsPolicy _policy;

    public CorsPolicyProvider()
    {
        // Create a CORS policy.
        _policy = new CorsPolicy
        {
            AllowAnyMethod = true,
            AllowAnyHeader = true,
            AllowAnyOrigin = true
        };

       // Magic line right here
        _policy.Origins.Add("*");

    }

    public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        return Task.FromResult(_policy);
    }
}

我玩了几个小时。一切都应该正常工作？我的意思是 EnableCors 属性也应该起作用？但它没有。所以我最后添加了上面的行来明确地将来源添加到策略中。砰！它像魔术一样工作。要使用它，只需将属性添加到您想要允许的 api 类或方法中。

[Authorize]
[RoutePrefix("api/LicenseFiles")]
[CorsPolicyProvider]
//[EnableCors(origins: "*", headers: "*", methods: "*")] does not work!!!!!  at least I couldn't get it to work
public class MyController : ApiController
{

【讨论】：