React前端调用ASP.NET MVC API触发CORS预检错误，如何解决？

方案1：后端ASP.NET MVC配置CORS #

方式A：Web.config直接添加响应头 #

在项目的Web.config中找到<system.webServer>节点，添加自定义跨域响应头：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <!-- 允许本地React开发环境的请求 -->
      <add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
      <!-- 生产环境建议指定具体域名，不要用*（带凭证请求不支持*） -->
      <!-- <add name="Access-Control-Allow-Origin" value="https://your-production-domain.com" /> -->
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
      <!-- 如果需要携带Cookie等凭证，添加下面这行 -->
      <!-- <add name="Access-Control-Allow-Credentials" value="true" /> -->
    </customHeaders>
  </httpProtocol>
</system.webServer>

方式B：自定义CORS过滤器实现细粒度控制 #

如果需要针对不同接口设置不同的跨域规则，创建一个ActionFilter：

using System.Web.Mvc;

public class CorsFilterAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var requestOrigin = filterContext.HttpContext.Request.Headers["Origin"];
        // 可以在这里添加白名单判断，只允许指定域名的请求
        if (!string.IsNullOrEmpty(requestOrigin))
        {
            filterContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:3000");
            filterContext.HttpContext.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            filterContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        }

        // 处理OPTIONS预请求，直接返回200状态码
        if (filterContext.HttpContext.Request.HttpMethod == "OPTIONS")
        {
            filterContext.HttpContext.Response.StatusCode = 200;
            filterContext.Result = new EmptyResult();
        }

        base.OnActionExecuting(filterContext);
    }
}

然后在Global.asax.cs中全局注册这个过滤器：

protected void Application_Start()
{
    // 其他初始化代码...
    GlobalFilters.Filters.Add(new CorsFilterAttribute());
}

也可以单独给某个Controller或Action添加[CorsFilter]特性，实现局部跨域配置。

方案2：React前端配置代理（无需修改后端） #

方式A：package.json简单代理 #

在React项目的package.json中添加proxy字段：

{
  "name": "your-react-app",
  "proxy": "http://api.testserver.com",
  // 其他配置项...
}

之后前端请求API时，改用相对路径：

// 原请求：fetch('http://api.testserver.com/api/GetCity')
// 修改为：
fetch('/api/GetCity')
  .then(res => res.json())
  .then(data => console.log(data))

这种方式仅适用于开发环境，生产环境需要用反向代理工具。

方式B：自定义多规则代理 #

如果需要同时代理多个不同的API地址，先安装依赖：

npm install http-proxy-middleware --save-dev

在src目录下创建setupProxy.js文件：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://api.testserver.com',
      changeOrigin: true,
    })
  );
};

同样，前端请求用相对路径/api/GetCity即可，代理会自动转发到目标API地址。

方案3：生产环境部署方案 #

生产环境不建议禁用浏览器安全策略，推荐以下两种方式：

1. 将React打包后的静态文件部署到ASP.NET MVC项目的wwwroot目录下，同域名访问避免跨域。
2. 使用Nginx等反向代理服务器，统一处理前端和API请求：

server {
    listen 80;
    server_name your-domain.com;

    # 处理React静态资源
    location / {
        root /path/to/react/build;
        try_files $uri $uri/ /index.html;
    }

    # 代理API请求
    location /api {
        proxy_pass http://api.testserver.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

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