使用多源 PUT 和 DELETE 请求时如何解决 ASP.NET Web API CORS 预检问题？

我有一个 ASP.NET Web API，由三个不同的 SPA 调用。我正在为 Web API 使用 Windows 身份验证。我最初尝试在 Web.config 中配置 CORS，如下所示：

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:63342" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
        <add name="Access-Control-Allow-Credentials" value="true" />
    </customHeaders>
</httpProtocol>

这导致了这个预检问题：

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin (...) is therefore not allowed access.

我通过在 Global.asax.cs 中添加以下方法解决了这个问题：

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

这种方法对于单个 SPA 非常有效。我认为我可以转到 Web.config 并添加其他来源，如下所示：

<add name="Access-Control-Allow-Origin" value="http://localhost:63342,http://localhost:63347,http://localhost:63345/>

但显然这是不允许的。这产生了以下错误：

The 'Access-Control-Allow-Origin' header contains multiple values (...), but only one is allowed. Origin (...) is therefore not allowed access.

因此，为了尝试解决此问题，我改变了方法，决定尝试在 WebAPIConfig.cs 上的 Register 方法中配置 CORS，如下所示：

var cors = new EnableCorsAttribute("http://localhost:63342,http://localhost:63347,http://localhost:63345", "Origin, X-Requested-With, Content-Type, Accept", "GET, POST, PUT, DELETE");
cors.SupportsCredentials = true;
config.EnableCors(cors);

我认为这会起作用，但现在在使用 PUT 和 DELETE 请求时再次出现预检错误，并且我不知道如何解决此问题。我调试了 Application_BeginRequest 方法，但它仍在刷新 OPTIONS 请求，因此我不知道是什么导致了此错误。有谁知道我该如何解决这个问题？

EDIT:

打印预检错误：

我能够通过进一步自定义 Global.asax.cs 中的 Application_BeginRequest 方法来解决我的问题，如下所示：

protected void Application_BeginRequest()
{
    if (Request.HttpMethod == "OPTIONS")
    {
        Response.StatusCode = (int)HttpStatusCode.OK;
        Response.AppendHeader("Access-Control-Allow-Origin", Request.Headers.GetValues("Origin")[0]);
        Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        Response.AppendHeader("Access-Control-Allow-Credentials", "true");
        Response.End();
    }
}

此代码的作用是将缺少的标头添加到导致预检错误的 OPTIONS 响应（预检请求）中。由于我有不同的来源调用我的 Web API，所以我使用Request.Headers.GetValues("Origin")[0])动态设置响应中的原点。

在 WebApiConfig.cs 中，我仍然指定了不同的来源，但在标头和方法上使用通配符，并设置SupportsCredentials为真，就像这样：

var cors = new EnableCorsAttribute("http://localhost:63342,http://localhost:63347,http://localhost:63345", "*", "*");
cors.SupportsCredentials = true;
config.EnableCors(cors);

另外，如果您像我一样使用 AngularJS，则必须配置 $http 才能使用凭据。可以像这样进行全局配置：

angular
.module('Application')
.config(['$httpProvider',
    function config($httpProvider) {
        $httpProvider.defaults.withCredentials = true;
    }
]);

就是这样。这解决了我的问题。如果其他人仍然遇到问题，我建议阅读以下出版物，这有助于我找到答案：

• http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
• https://evolpin.wordpress.com/2012/10/12/the-cors/ https://evolpin.wordpress.com/2012/10/12/the-cors/
• AngularJS $http、CORS 和 http 身份验证 https://stackoverflow.com/questions/21455045/angularjs-http-cors-and-http-authentication
• AngularJS 对跨源资源执行 OPTIONS HTTP 请求 https://stackoverflow.com/questions/12111936/angularjs-performs-an-options-http-request-for-a-cross-origin-resource
• AngularJS POST 失败：预检响应具有无效的 HTTP 状态代码 404 https://stackoverflow.com/questions/33660712/angularjs-post-fails-response-for-preflight-has-invalid-http-status-code-404