CORS执行策略失败：React前端调用ASP.NET后端登录API遇跨域权限问题

看起来你遇到的是典型的跨域资源共享（CORS）配置问题，Postman能成功、前端失败的情况，基本可以锁定是前端端口不在后端允许的CORS源列表里，咱们一步步来解决：

1. 最直接的问题：CORS源列表遗漏了React的实际端口 #

你的React应用运行在http://localhost:3001，但看你Program.cs里的CORS配置，只添加了http://localhost:3000，这就导致3001端口的请求被后端CORS策略直接拒绝了。

修改方案：更新CORS允许的源列表 #

在Program.cs的CORS配置块中，把React的实际运行端口http://localhost:3001加入允许列表：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigins", policy =>
    {
        policy.WithOrigins(
                "http://localhost:3000", // 原有的允许端口
                "http://localhost:3001"  // 新增你的React实际运行端口
            )
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()
            .SetPreflightMaxAge(TimeSpan.FromSeconds(86400));
    });
});

2. 确认中间件顺序（关键！） #

你当前的中间件顺序是正确的，但这里再强调一遍：CORS中间件的位置直接影响策略是否生效，必须保证：

app.UseRouting();
app.UseCors("AllowSpecificOrigins"); // 必须在UseRouting之后，UseAuthentication/UseAuthorization之前
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();

这个顺序不能颠倒，否则CORS策略会被后续中间件覆盖或跳过。

3. 前端代码的小调试bug（不影响CORS，但影响排错） #

你的React代码里，throw new Error()之后的console.log语句永远不会执行，因为throw会直接跳转到catch块，建议调整顺序方便调试：

if (!response.ok) {
    // 把日志输出放在throw之前
    console.log("请求失败状态码:", response.status);
    console.log("响应JSON promise:", response.json);
    throw new Error(`Login failed! Status: ${response.status}`);
}

4. 其他可能的排查点 #

如果修改完CORS还是有问题，可以检查这几点：

• 开发环境下是否开启了Https重定向：你在开发环境注释了app.UseHttpsRedirection();，这个是对的，因为前端用的是HTTP，后端强制HTTPS会导致请求失败
• 确认后端登录接口能正确处理Content-Type: application/json的请求（Postman能成功，这点应该没问题）
• 查看浏览器控制台的CORS错误详情，通常会明确指出是源被拒绝还是凭证配置问题（你已经在前后端都配置了凭证支持，credentials: "include"和.AllowCredentials()，这部分是正确的）

最后，重启你的ASP.NET后端和React前端，再测试登录请求，应该就能正常通过了。

内容来源于stack exchange