.NET与React项目POST请求CORS报错：content-type不被预检响应允许

针对你遇到的content-type不被预检响应允许的CORS错误，结合已配置CORS但问题仍存在的情况，排查以下几个关键点：

1. 确认CORS中间件的配置顺序 #

.NET中中间件执行顺序直接影响CORS策略是否生效，UseCors必须放在授权中间件和路由映射之前。正确的Program.cs配置示例：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp",
        policy =>
        {
            policy.WithOrigins("http://localhost:3000")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

builder.Services.AddControllers();

var app = builder.Build();

// 注意中间件顺序：UseCors需在UseAuthorization和MapControllers之前执行
app.UseCors("AllowReactApp");

app.UseAuthorization();

app.MapControllers();

app.Run();

2. 检查是否有其他组件覆盖CORS响应头 #

如果项目中存在自定义中间件、全局过滤器或第三方组件，可能会手动修改Access-Control-Allow-Headers响应头，导致content-type未被包含。需要排查这类组件的逻辑，避免覆盖CORS配置的响应头。

3. 验证控制器/Action的CORS特性匹配 #

如果在控制器或Action上使用了[EnableCors]特性，必须确保指定的策略名称和你配置的一致，否则会导致策略不生效。示例：

[EnableCors("AllowReactApp")]
[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    // 接口逻辑
}

4. 清除浏览器预检请求缓存 #

浏览器会缓存OPTIONS预检请求的响应，即使你更新了CORS配置，旧缓存可能仍在生效。解决方式：

• 打开Chrome开发者工具（F12），在Network标签页勾选「Disable cache」后重新发起请求
• 直接清除浏览器的缓存数据

5. 确认React请求的Content-Type设置 #

检查React请求中实际发送的Content-Type，比如使用axios或fetch发送JSON请求时，默认Content-Type为application/json。如果你的请求使用了特殊自定义头，需确保CORS策略明确允许（AllowAnyHeader()已覆盖所有情况，此步骤主要用于排查异常请求头）。

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