使用Ajax调用Web API方法时返回400错误该如何解决

问题原因总结 #

• 核心错误1：dataType: "jsonp" 配置错误，JSONP 协议仅支持 GET 请求，不支持 POST 请求，该配置会导致请求结构不符合服务端预期直接返回400。
• 核心错误2：Web API 参数绑定不匹配，当请求的 contentType 为 application/json 时，Web API 默认只会将请求体中的JSON整体绑定到单个复杂类型参数，你注释了 RegisterUserVM 实体参数改为多个字符串简单类型参数，服务端无法从请求中匹配到对应参数值。
• 补充规则：Web API 中简单类型（比如string、int等）参数默认会从URL查询字符串中取值，不会自动解析请求体JSON的字段匹配单个参数。

修复方案 #

第一步：修正Ajax配置，移除jsonp配置 #

如果是跨域问题导致你想用jsonp，改为在Web API项目中配置CORS即可，修改后的Ajax代码如下：

let RegisterUserVM = new Object();
RegisterUserVM.Name = name;
RegisterUserVM.Username = username;
RegisterUserVM.Password = password;

$.ajax({
            url: mURL + "api/Default/RegisterUser",
            method: "POST",
            data: JSON.stringify(RegisterUserVM),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
          }).done(function( msg ) {
            console.log("Done function");
            console.log(msg);
          }).fail(function( jqXHR, textStatus ) {
            console.log("Fail function");
            console.log(jqXHR);
            console.log(textStatus);
          });

第二步：修正服务端接口参数 #

恢复用实体类接收参数，同时给参数加 [FromBody] 特性明确告诉Web API从请求体读取JSON绑定：

[HttpPost]
public string RegisterUser([FromBody] RegisterUserVM registerUserVM)
{
   return "";
}

如果确实需要使用多个简单类型参数接收，需要将参数放到URL的查询字符串中传递，或者给每个参数添加[FromBody]特性（该写法不符合常规接口设计规范，更推荐使用实体类接收请求体参数）。

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