ASP.NET Web API与React（IIS部署）CORS跨域错误解决咨询

1. 后端ASP.NET Web API配置 #

针对不同版本的Web API，配置方式略有差异：

ASP.NET Framework Web API #

• 先安装Microsoft.AspNet.WebApi.Cors NuGet包
• 在WebApiConfig.cs中全局启用CORS：

  using System.Web.Http;
  using System.Web.Http.Cors;
  
  public static class WebApiConfig
  {
      public static void Register(HttpConfiguration config)
      {
          // 测试阶段可临时用*允许所有源，生产环境替换为前端实际地址（如http://192.168.1.100:3000）
          var corsAttr = new EnableCorsAttribute("*", "*", "*");
          config.EnableCors(corsAttr);
          
          // 原有路由配置
          config.MapHttpAttributeRoutes();
          config.Routes.MapHttpRoute(
              name: "DefaultApi",
              routeTemplate: "api/{controller}/{id}",
              defaults: new { id = RouteParameter.Optional }
          );
      }
  }
  

• 也可在单个控制器或方法上添加[EnableCors(origins: "你的前端地址", headers: "*", methods: "*")]特性做局部配置

ASP.NET Core Web API #

• 在Program.cs中添加CORS服务并启用中间件：

  var builder = WebApplication.CreateBuilder(args);
  
  // 配置CORS策略
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowFrontend", policy =>
      {
          policy.WithOrigins("你的前端实际地址") // 如http://192.168.1.100:3000
                .AllowAnyHeader()
                .AllowAnyMethod();
      });
  });
  
  builder.Services.AddControllers();
  
  var app = builder.Build();
  
  // 注意CORS中间件要放在UseRouting之后、UseAuthorization之前
  app.UseCors("AllowFrontend");
  
  app.UseAuthorization();
  app.MapControllers();
  app.Run();
  

2. IIS服务器配置检查 #

• 安装CORS模块：打开IIS管理器，服务器节点的功能视图中查看是否有"CORS"模块，没有的话通过服务器管理器添加Web服务器角色下的CORS功能
• 配置站点CORS规则：进入Web API站点的CORS设置，添加允许的前端源、HTTP方法和请求头
• 放行OPTIONS请求：跨域预检请求用OPTIONS方法，确保IIS的请求筛选没有阻止该方法，同时URL重写规则不要拦截OPTIONS请求
• 网络与端口检查：确认服务器防火墙开放44312端口，客户端PC能通过telnet或ping连通服务器IP（错误中status code为null大概率和网络/端口不通有关）
• HTTPS证书检查：如果用HTTPS，确保服务器证书在客户端PC的信任根证书库中，Firefox会因证书不信任阻止请求，表现为CORS错误

3. 前端React优化配置 #

• 检查API请求地址拼写：错误中的LoadDtatabydate疑似拼写错误（应为LoadDatabydate），拼写错误会导致请求失败，被浏览器判定为CORS问题
• 配置IIS反向代理（推荐生产环境使用）：如果前端也部署在IIS，可给前端站点添加URL重写规则，将/api开头的请求转发到后端API，避免跨域：

  <rewrite>
    <rules>
      <rule name="ForwardToAPI" stopProcessing="true">
        <match url="^api/(.*)" />
        <action type="Rewrite" url="https://10.1.221.43:44312/api/{R:1}" />
      </rule>
    </rules>
  </rewrite>
  

  之后前端只需请求/api/service/LoadDatabydate即可

4. 快速排查技巧 #

• 用Postman测试OPTIONS请求到API地址，看是否返回200状态码，且响应头包含Access-Control-Allow-Origin等CORS相关字段
• 查看浏览器控制台的网络请求，重点看预检请求（OPTIONS）的状态码，404/500说明后端未正确处理OPTIONS请求，需调整CORS配置

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