本地调试WebAPI与WebApp遇CORS错误：缺失Access-Control-Allow-Origin头

我在VS本地调试模式下运行WebAPI（端口64335）和WebApp（端口64333）时，遇到CORS错误：从源地址http://localhost:64333向http://localhost:64335/token发起XMLHttpRequest请求时，被CORS策略阻止，提示预检请求未通过访问控制检查，请求的资源上不存在'Access-Control-Allow-Origin'头。

我尝试了两种方法但都无效：

方法1：Web.config添加自定义HTTP头 #

在WebAPI的web.config中配置<httpProtocol>下的自定义头：

<httpProtocol>
  <customHeaders>        
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Credentials" value="true"/>
    <add name="Access-Control-Allow-Methods" value="GET, PUT, OPTIONS, POST, DELETE, HEAD" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
    <!--<add name="X-Frame-Options" value="SAMEORIGIN" />-->
  </customHeaders>
</httpProtocol>

方法2：Application_BeginRequest事件添加响应头逻辑 #

在WebAPI的Global.asax中添加Application_BeginRequest事件处理：

protected void Application_BeginRequest(object sender, EventArgs e)
{
    //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

    string[] allowedOrigin = new string[2];
    allowedOrigin[0] = "http://localhost:64335";
    allowedOrigin[1] = "http://localhost:64333";            

    var origin = HttpContext.Current.Request.Headers["Origin"];
    if (origin != null && allowedOrigin.Contains(origin))
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", origin);

        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");

            //These headers are handling the "pre-flight" OPTIONS call sent by the browser
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE,HEAD,TRACE");
            //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
            //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
            //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }                                              
    }
}

两种方法均无效，仍收到相同的CORS错误提示，附流量截图：

请问哪里操作有误？

问题排查与解决步骤 #

1. 解决OPTIONS请求被IIS拦截的问题

本地调试时，IIS Express默认可能拦截OPTIONS请求，导致自定义逻辑无法触发。在WebAPI的web.config的<system.webServer>节点下添加如下配置：

<system.webServer>
  <handlers>
    <remove name="OPTIONSVerbHandler"/>
    <add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="IsapiModule" 
         scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" 
         resourceType="Unspecified" requireAccess="None" 
         preCondition="classicMode,runtimeVersionv4.0,bitness32" />
  </handlers>
</system.webServer>

若使用集成模式，将preCondition改为integratedMode,runtimeVersionv4.0。

2. 修复跨域头冲突问题

第一种方法中同时设置Access-Control-Allow-Origin: *和Access-Control-Allow-Credentials: true是无效的——当允许凭证时，Origin不能使用通配符，必须指定具体域名，否则浏览器会忽略这些响应头。

3. 修正Application_BeginRequest逻辑漏洞

• 检查Origin获取是否正确：可以在事件中添加调试日志（如Debug.WriteLine(origin)），确认是否拿到了http://localhost:64333这个请求源。
• 非OPTIONS请求需携带凭证头：当请求带凭证时，除了OPTIONS预检请求，实际请求也需要返回Access-Control-Allow-Credentials: true头，可在Origin判断通过后统一添加。
• 替换Response.End()：该方法会强制终止响应，可能导致异常，建议改为：

  HttpContext.Current.Response.StatusCode = 200;
  HttpContext.Current.Response.Flush();
  HttpContext.Current.Response.SuppressContent = true;
  

4. 改用官方WebAPI CORS包（推荐方案）

手动配置易出错，使用官方包更可靠：

1. 通过NuGet安装：Install-Package Microsoft.AspNet.WebApi.Cors
2. 在WebApiConfig.cs中配置全局跨域策略：

using System.Web.Http;
using System.Web.Http.Cors;

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // 允许指定源的跨域请求，支持凭证
        var corsPolicy = new EnableCorsAttribute(
            origins: "http://localhost:64333",
            headers: "*",
            methods: "*"
        ) { SupportsCredentials = true };
        config.EnableCors(corsPolicy);

        // 其他WebAPI路由配置
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

如需更精细控制，可在控制器或Action上添加[EnableCors]特性。

5. 验证响应头是否生效

用浏览器开发者工具查看OPTIONS请求的响应头，确认是否包含Access-Control-Allow-Origin等必要字段。如果完全没有，需检查WebAPI项目的web.config是否保存正确、Global.asax是否被正确加载。

内容的提问来源于stack exchange，提问作者solarissf