VueJs调用ASP.NET Core Web API POST请求报CORS错误如何解决

• CORS策略配置缺失必要项：携带Content-Type: application/json的POST请求属于复杂跨域请求，会先发送OPTIONS预检请求校验权限，你当前仅配置了允许指定源和任意方法，缺少AllowAnyHeader()配置，导致预检请求直接被拒绝，你看到的204状态码就是预检请求的返回状态，实际业务POST请求并未发送到后端接口，数据当前无法送达。
• 中间件顺序错误风险：如果你的app.UseCors()代码放在了app.UseRouting()之前或者app.UseAuthorization()之后，会直接导致CORS策略完全不生效，这是ASP.NET Core的典型配置顺序问题。
• 前后端响应解析逻辑不匹配：你的接口当前返回纯字符串"Ok"，但前端调用res.json()解析响应，JSON解析纯文本会抛出异常，也会被浏览器判定为跨域请求处理失败。

调整CORS配置 #

修改Program.cs/Startup.cs中的CORS配置，补充允许请求头的配置，同时确认中间件顺序：

// 必须保证UseCors放在UseRouting之后、UseAuthorization之前
app.UseRouting();

app.UseCors(
    options => options.WithOrigins("http://localhost:8080")
                      .AllowAnyMethod()
                      .AllowAnyHeader() // 新增该行，允许application/json等自定义请求头
);

app.UseAuthorization();

匹配响应解析逻辑 #

二选一修改即可：

1. 调整后端接口返回JSON格式：

[HttpPost]
public IActionResult CreateProject([FromBody] Project data)
{
    Debug.WriteLine(data.Name);
    return Ok(new { code = 200, msg = "Ok", data = data });
}

2. 调整前端解析逻辑为文本解析：

// 将原代码中的 const data = await res.json() 替换为
const data = await res.text()

数据送达验证 #

修复完成后，在接口Debug.WriteLine(data.Name)行加断点，调试运行Web API后发起前端请求，断点命中即说明数据已经正常送达后端，也可以直接查看Debug输出窗口的打印内容确认接收的参数值。

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