如何在ASP.NET MVC与ReactJS中启用CORS？问题求助

问题根源分析 #

从你的代码和报错信息来看，核心问题有两个：

1. 重复注册控制器服务：ConfigureServices中两次调用services.AddControllers().AddNewtonsoftJson()，第二次调用会重置之前的服务配置，导致CORS策略无法正确绑定到控制器。
2. 中间件顺序错误：UseCors的位置不符合ASP.NET Core中间件执行逻辑，必须在UseRouting之后、UseAuthorization之前，才能正确注入CORS响应头。

修正步骤 #

1. 修复ConfigureServices中的重复服务注册

删除重复的控制器注册代码，保留一次完整配置：

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers()
        .AddNewtonsoftJson(options =>
        {
            options.SerializerSettings.NullValueHandling = NullValueHandling.Ignore;
            options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
        });
    
    services.AddCors(options =>
    {
        options.AddPolicy("MyCorsPolicy", builder =>
        {
            builder.WithOrigins("http://localhost:3000")
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        });
    });
}

2. 调整中间件顺序

将UseCors移动到UseRouting之后、UseAuthorization之前，确保CORS策略在路由匹配后、授权验证前生效：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    
    app.UseRouting();
    
    // 正确位置：路由之后，授权之前
    app.UseCors("MyCorsPolicy");
    
    app.UseAuthorization();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

3. 可选：显式在控制器上启用CORS策略

为确保策略精准应用到API控制器，可在控制器类上添加[EnableCors]特性：

[ApiController]
[Route("api/[controller]")]
[EnableCors("MyCorsPolicy")]
public class UserController : ControllerBase
{
    // 你的API Action方法
}

额外验证点 #

• 确认前端请求的Origin（http://localhost:3000）与WithOrigins中配置的地址完全一致，注意不要带末尾斜杠（http://localhost:3000/会被视为不同源）。
• 检查是否存在自定义中间件或过滤器拦截了响应，导致CORS头未被正确返回。

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