ASP.NET WebAPI2搭配AngularJS出现CORS跨域错误无法正常获取数据

1. 修正EnableCors特性配置 #

你当前代码中[EnableCors]特性的origins参数存在两处高频错误：

• 占位符未替换：需要把PortNumberHereWithoutTheForwardSlah替换为你前端实际运行的端口号，比如前端跑在https://localhost:5001就填origins: "https://localhost:5001"
• 协议必须完全匹配：如果前端是http协议启动，origins也要对应写http前缀，不能和后端的https协议混用
  临时测试可以把origins设为"*"全放开，确认功能正常后再收紧权限。

2. 排查web.config配置冲突 #

多数CORS配置不生效是IIS默认拦截了OPTIONS预检请求，需要在web.config的<system.webServer>节点下添加如下配置：

<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Headers" value="Content-Type, Accept, X-Requested-With" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

注意：已经在控制器添加[EnableCors]特性的前提下，不要在customHeaders里添加Access-Control-Allow-Origin配置，否则会出现重复CORS头反而导致跨域失效。

3. 放行OPTIONS预检请求 #

如果你的项目有全局鉴权过滤器、路由拦截逻辑，大概率会直接拦截OPTIONS请求返回401/403状态码，导致跨域流程中断。可以在Global.asax的Application_BeginRequest方法中添加全局放行规则：

if (Request.HttpMethod == "OPTIONS")
{
    Response.StatusCode = (int)System.Net.HttpStatusCode.OK;
    Response.End();
    return;
}

4. 排查前端请求与接口本身的问题 #

打开火狐开发者工具的网络标签页，确认如下信息：

• 请求的URL、请求方法和后端接口定义完全匹配
• 响应头中是否返回了Access-Control-Allow-Origin字段，值是否和前端地址一致
• 启用CORS扩展后没有跨域报错但拿不到数据，大概率是接口本身返回了非200状态码（比如鉴权失败、业务逻辑报错），CORS扩展只会帮你补充跨域头，不会修复接口本身的错误，直接查看响应体的报错信息排查业务问题即可。

5. 最终验证 #

后端CORS配置正确后，必须关闭火狐CORS扩展再测试，扩展本身可能修改请求头导致配置冲突，正常的CORS配置不需要依赖第三方扩展即可正常运行。

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