如何解决ASP.NET搭配React时的CORS策略拦截问题

问题根源 #

你遇到的CORS拦截，主要是后端CORS配置存在冗余冲突，加上前端POST请求的参数传递方式不符合规范导致的。Postman不受浏览器CORS策略限制，所以能正常调用，但浏览器会严格校验跨域请求的响应头。

修复方案 #

1. 简化并修正后端CORS配置

你的Program.cs里CORS配置有两处错误：

• WithExposedHeaders是用来暴露自定义响应头的，不是设置允许的Origin，这行完全多余
• SetIsOriginAllowed((host) => true)会允许所有Origin，和WithOrigins("http://localhost:3000")冲突，二选一即可（开发环境用明确Origin更安全）

修改后的Program.cs核心代码：

var policyName = "AllowLocalhost3000";
var builder = WebApplication.CreateBuilder(args);

// 精简CORS策略
builder.Services.AddCors(options => 
{ 
    options.AddPolicy(name: policyName, 
        policyBuilder => 
        { 
            policyBuilder.WithOrigins("http://localhost:3000") 
                         .AllowAnyHeader()  
                         .AllowAnyMethod()  
                         .AllowCredentials(); 
        }); 
});

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer(); 
builder.Services.AddSwaggerGen();

var app = builder.Build();

// 保持UseCors在UseAuthorization和UseHttpsRedirection之前（你的顺序已正确）
app.UseCors(policyName);

if (app.Environment.IsDevelopment()) 
{ 
    app.UseSwagger(); 
    app.UseSwaggerUI(); 
}

app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

2. 修正前端POST请求的参数传递方式

你现在把POST参数直接拼在URL里，不符合POST请求的规范，应该将参数放在请求体中。Axios的post方法第二个参数是请求体数据，不是URL拼接内容：

修改后的MemberAdd.jsx核心代码：

try { 
    const response = await axios.post( 
        'http://localhost:5243/Member', // 请根据后端实际路由调整
        {
            firstName: member.firstName,
            lastName: member.lastName,
            dob: member.dob,
            email: member.email
        }
    );

    if (response.status === 200) {
        alert("Member Added!");
        clearForm();
    } else {
        alert("Failed to add member.");
    }
} catch (error) {
    console.error("Error adding member: ", error);
    alert("An error occurred while adding the member.");
}

额外检查点 #

如果修复后仍有问题，确认以下几点：

• 后端API的路由是否正确（比如你原URL的/MemberFirstName=...大概率不是合法路由，应该是/Member并接收请求体参数）
• 后端启动的端口确实是5243
• 浏览器Network面板查看OPTIONS请求的响应头，确认是否包含Access-Control-Allow-Origin: http://localhost:3000

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