React.js调用.NET Core API首请求因CORS失败，后续请求正常

你的问题核心是非简单请求的预检（OPTIONS）请求未被正确处理——因为你的POST请求设置了Content-Type: application/json，属于非简单请求，浏览器会先发送OPTIONS预检请求确认权限，首次请求时服务端的CORS配置未正确响应这个预检，导致后续POST请求被拦截。

以下是具体解决方案：

1. 修正.NET Core CORS中间件顺序 #

在.NET 6+的Program.cs中，UseCors必须放在正确的执行顺序里：先处理静态文件（如果有），再启用CORS，之后才是路由、授权等中间件。错误的顺序会导致CORS头无法正确添加到响应中。

正确的注册示例：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactClient", policy =>
    {
        // 替换为你的React应用域名，生产环境避免使用*
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyMethod() // 允许所有HTTP方法，包含OPTIONS预检请求
              .AllowAnyHeader()
              .AllowCredentials(); // 需要携带Cookie/认证信息时开启，否则可省略
    });
});

// 注册其他服务（如Controllers）
builder.Services.AddControllers();

var app = builder.Build();

// 中间件执行顺序：静态文件 → CORS → 路由 → 授权 → 端点映射
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
app.UseStaticFiles(); // API不提供静态文件可省略
app.UseCors("AllowReactClient"); // 必须在UseRouting和UseAuthorization之前
app.UseRouting();
app.UseAuthorization();
app.MapControllers();

app.Run();

2. 确保预检请求被正确响应 #

如果API有自定义中间件或路由规则，检查是否拦截了OPTIONS请求：

• 若OPTIONS请求返回401/403，说明被权限验证中间件拦截，需在权限逻辑中跳过OPTIONS请求的校验
• 若OPTIONS请求返回200但无Access-Control-Allow-Origin头，说明CORS中间件未生效，重新核对中间件顺序

可以通过浏览器开发者工具的网络面板查看首次请求的OPTIONS请求状态，确认响应头是否包含正确的CORS配置。

3. 前端请求的适配调整（可选） #

如果服务端开启了AllowCredentials，前端fetch需添加credentials: 'include'配置，避免潜在的CORS上下文冲突：

fetch(GET_PAYMENT_URL, {
    method: 'POST',
    mode: 'cors',
    credentials: 'include', // 对应服务端的AllowCredentials配置
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(paymentUrlRequest),
})
.then((response) => response.json())
.then((data) => {
    // 处理返回数据
})
.catch(error => {
    // 处理请求错误
});

验证步骤 #

1. 清除浏览器缓存，打开开发者工具并勾选「Disable cache」
2. 发起请求，检查OPTIONS预检请求的响应头是否包含Access-Control-Allow-Origin，且值与React应用域名匹配
3. 确认POST请求能正常返回数据

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