React应用部署后CORS拦截问题：如何通过指定源配置解决

• React 18应用部署在Azure虚拟机，.NET 6 Minimal API部署在同域物理服务器，React通过fetch发送POST请求，未配置代理或CORS相关设置。
• 本地环境下，使用指定源的CORS配置可正常工作：

  var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
  
  builder.Services.AddCors(options =>
  {
      options.AddPolicy(name: MyAllowSpecificOrigins,
          policy =>
          {
              policy.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:3000", "https://myCorrect.domain.co.uk");  
          });
  });
  
  var app = builder.Build();
  
  app.UseCors(MyAllowSpecificOrigins);
  

• 生产环境下出现CORS错误：

  ...has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

• 使用允许所有源的CORS配置可正常接收请求，但希望用指定源的方式解决：

  builder.Services.AddCors();
  
   app.UseCors(x => x
          .AllowAnyMethod()
          .AllowAnyHeader()
          .SetIsOriginAllowed(origin => true) // allow any origin 
          .AllowCredentials());
  

以下是针对指定源CORS配置在生产环境失效的排查和修复步骤：

1. 确认生产环境React应用的实际请求源 #

• 打开浏览器控制台的网络请求面板，查看POST请求（或OPTIONS预检请求）的Origin请求头实际值，确保和WithOrigins中配置的https://myCorrect.domain.co.uk完全一致：
  • 检查是否包含额外端口号（比如生产环境React使用了非标准HTTPS端口，需将源改为https://myCorrect.domain.co.uk:xxxx）
  • 确认是否存在域名前缀差异（比如配置的是不带www的域名，但实际请求源是带www的，或反之）
  • 排查是否有重定向导致源变化（比如访问时被自动重定向到其他子域名）

2. 调整CORS中间件顺序 #

在.NET 6 Minimal API中，UseCors的位置必须严格遵循顺序：放在UseRouting之后、UseAuthorization和UseEndpoints之前，否则CORS头无法正确添加到响应中：

var app = builder.Build();

// 正确的中间件顺序示例
app.UseRouting();
app.UseCors(MyAllowSpecificOrigins); // 关键：放在UseRouting之后，UseAuthorization之前
app.UseAuthorization();

app.MapControllers();
app.Run();

3. 添加凭据支持（若请求包含凭据） #

如果你的fetch请求携带了Cookie、HTTP认证信息等凭据，需要同时修改API和React端的配置：

• API端修改CORS策略：

  policy.AllowAnyHeader()
        .AllowAnyMethod()
        .WithOrigins("http://localhost:3000", "https://myCorrect.domain.co.uk")
        .AllowCredentials(); // 新增这一行
  

• React端修改fetch请求：

  fetch('https://your-api-domain/api/endpoint', {
    method: 'POST',
    credentials: 'include', // 确保携带凭据
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  

4. 检查反向代理/负载均衡器的请求头转发 #

如果物理服务器前端部署了反向代理（如Nginx、IIS ARR）或负载均衡器，可能会修改或剥离Origin请求头，导致.NET的CORS策略无法匹配：

• 配置代理服务器，确保完整转发Origin请求头到后端API
• 若代理服务器做了HTTPS终止，需在.NET中配置信任代理并处理转发头：

  builder.Services.Configure<ForwardedHeadersOptions>(options =>
  {
      options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
      // 添加代理服务器的IP地址到信任列表
      options.KnownProxies.Add(IPAddress.Parse("your-proxy-server-ip"));
  });
  
  var app = builder.Build();
  app.UseForwardedHeaders(); // 放在UseCors之前
  app.UseCors(MyAllowSpecificOrigins);
  

5. 验证CORS策略是否正确加载 #

添加一个测试端点，输出当前配置的允许源，确认配置是否生效：

app.MapGet("/cors-config", async (ICorsPolicyProvider policyProvider) =>
{
    var policy = await policyProvider.GetPolicyAsync(null, CancellationToken.None);
    var allowedOrigins = ((CorsPolicy)policy).Origins;
    return Results.Ok(new { AllowedOrigins = allowedOrigins });
});

访问该端点，检查返回的允许源列表是否包含生产环境的React域名。

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