React对接ASP.Net Core 3跨域问题：预请求未通过CORS校验

嘿，我碰到过好几次这种本地正常、部署到Azure就炸的CORS坑，咱们一步步把它搞定：

1. 修正中间件顺序（最关键！） #

你现在的UseCors放在了路由匹配之后，这会导致CORS中间件根本没机会处理请求——因为路由已经直接映射到控制器了，CORS头根本加不上。必须把UseCors放到UseRouting之后、UseAuthorization之前，同时调整路由和端点的配置方式：

修改后的Configure方法代码：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseRouting();

    // 把CORS中间件移到这里：路由之后，授权之前
    app.UseCors("ReactPolicy");

    app.UseAuthorization();

    // 单独配置端点映射，不要嵌套在UseRouting里
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

2. 修复AllowAnyOrigin与AllowCredentials的冲突 #

你当前的CORS策略同时用了AllowAnyOrigin()和AllowCredentials()，这是浏览器严格禁止的组合——本地开发可能因为浏览器宽松策略没报错，但生产环境的预检请求会直接失败。必须明确指定允许的前端域名：

修改ConfigureServices里的CORS配置：

services.AddCors(o => o.AddPolicy("ReactPolicy", builder => {
    // 生产环境指定你的前端域名，多个源用逗号分隔
    builder.WithOrigins("https://frontend.azurewebsites.net")
           // 开发环境可追加本地地址：
           // .WithOrigins("https://frontend.azurewebsites.net", "http://localhost:3007")
           .AllowAnyMethod()
           .AllowAnyHeader()
           .AllowCredentials();
}));

3. 检查Azure App Service的CORS配置 #

Azure App Service自带了一层CORS配置，如果这里设置了值，会直接覆盖你ASP.NET Core代码里的配置！你需要：

• 登录Azure门户，找到你的后端App Service
• 进入CORS选项卡
• 要么清空这里的允许源（让代码配置生效），要么把https://frontend.azurewebsites.net添加进去，确保和代码配置一致

4. 验证预检请求 #

部署后用浏览器开发者工具的网络标签，找到失败的OPTIONS预检请求，查看响应头：

• 如果还是没有Access-Control-Allow-Origin，说明上面的步骤没执行到位
• 如果有该头但值不匹配，检查代码或Azure门户的配置是否正确

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