跨项目调用ASP.NET Core 6 Web API报400 Bad Request错误的解决方法

核心问题分析 #

拆分项目后出现400错误，主要涉及三个关键点：跨域配置缺失、请求数据格式与API参数绑定不匹配、路由地址不匹配。

具体解决步骤 #

1. 配置Web API跨域（CORS） #

由于MVC项目和Web API项目端口不同，属于跨域场景，必须在Web API中开启跨域支持：
在Web API的Program.cs中添加以下代码：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowMvcOrigin",
        policy => policy.WithOrigins("https://localhost:你的MVC项目端口号")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 启用CORS中间件（注意顺序：在UseRouting之后，UseAuthorization之前）
app.UseCors("AllowMvcOrigin");

2. 修正路由地址匹配 #

Ajax请求的URL中多了Values前缀，与API的路由配置不符，需要调整：
原Ajax URL：

var url = "https://localhost:7253/Values/api/Test666";

修改为：

var url = "https://localhost:7253/api/Test666";

同时将API的Route属性末尾的斜杠去掉，避免匹配问题：

[Route("api/Test666")]

3. 调整请求数据与参数绑定方式 #

方案一：保持jQuery默认表单格式，修改API参数绑定

jQuery Ajax默认发送application/x-www-form-urlencoded格式数据，需要给API参数添加[FromForm]特性，让框架从表单体中取值：

[HttpPost]
[Route("api/Test666")]
public IActionResult Test666([FromForm] string value1, [FromForm] string value2)
{
    return Ok(value1);
}

方案二：改用JSON格式发送请求，使用模型接收

如果更倾向于JSON格式传输，修改Ajax配置：

var data = {
    value1: "ProposerMail",
    value2: "ExpextMail",
};

var url = "https://localhost:7253/api/Test666";

$.ajax({
    url: url,
    type: 'POST',                   
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8", // 指定JSON格式
}).done(function (data) {
    var lsTemp = "AAA";
})
.fail(function (jqXHR, textStatus, errorThrown) {
    alert(jqXHR.status);
    alert(textStatus);
    alert(errorThrown);
});

然后在Web API中创建接收模型，并使用[FromBody]绑定：

// 定义接收模型
public class TestRequestModel
{
    public string value1 { get; set; }
    public string value2 { get; set; }
}

[HttpPost]
[Route("api/Test666")]
public IActionResult Test666([FromBody] TestRequestModel model)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
    return Ok(model.value1);
}

验证步骤 #

1. 重启Web API和MVC项目
2. 触发Ajax请求，检查是否返回正常响应

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