解决React调用ASP.NET Core 6 Web API POST带Body的CORS跨域问题

你的问题核心是带JSON请求体的POST触发了CORS预检请求（OPTIONS），但服务器未正确响应该请求，导致浏览器拦截后续请求。以下是针对性的修复步骤：

1. 确保模型绑定正确配置 #

你的Post方法参数User需要显式添加[FromBody]特性，确保ASP.NET Core从请求体中解析JSON数据：

[HttpPost]
public IActionResult Post([FromBody] User user)
{
    return Ok(user);
}

同时，必须保证User类是public访问级别，且属性可读写。如果User是定义在TestController内部的嵌套类，必须加上public修饰符：

public class User
{
    public string firstName { get; set; }
    public string lastName { get; set; }
}

如果User类是internal/private，模型绑定会失败，服务器会提前返回错误，导致CORS头无法被添加到响应中。

2. 验证中间件顺序（已配置正确，但再次确认） #

确保UseCors中间件在正确的位置执行，你的现有配置顺序是正确的：

// 正确顺序：Swagger -> CORS -> 授权 -> 路由映射
app.UseSwagger();
app.UseSwaggerUI();
app.UseCors(MyAllowSpecificOrigins); // 必须在MapControllers和UseAuthorization之前
app.UseAuthorization();
app.MapControllers();

UseCors必须在MapControllers之前，否则CORS中间件无法拦截控制器的请求（包括预检OPTIONS请求）。

3. 额外排查点 #

• 检查浏览器网络面板中的OPTIONS请求响应：确认是否返回204状态码，且包含Access-Control-Allow-Origin、Access-Control-Allow-Credentials等头信息。
• 如果OPTIONS请求返回404，可手动添加OPTIONS请求映射：

app.MapMethods("/Test", new[] { "OPTIONS" }, () => Results.NoContent());

经过以上调整，带请求体的POST请求应该可以正常触发控制器的断点，且CORS错误会消失。

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