React调用ASP.NET Core 5控制器POST接口报400改FromForm后参数为空

问题原因 #

1. 用[FromBody] string data接收时返回400：ASP.NET Core的模型绑定规则中，[FromBody]接收string类型参数时，要求请求体必须是纯JSON字符串，而你前端传入的是序列化后的JSON对象结构（形如{"searchTitle":"xxx",...}），模型绑定系统无法将JSON对象映射为string类型，因此返回400参数校验失败。
2. 改为[FromForm]后参数为null：你前端请求头设置的是Content-Type: application/json，[FromForm]仅用于接收x-www-form-urlencoded或form-data格式的请求，格式不匹配导致无法绑定参数，因此拿到null值。

推荐解决方案（最规范） #

后端定义对应参数的接收模型，直接绑定JSON对象，无需手动处理序列化：

1. 新增搜索请求模型类

public class SearchRequest
{
    public string SearchTitle { get; set; }
    public bool BoolTitle { get; set; }
    public bool BoolSubject { get; set; }
    public string SearchElement { get; set; }
    public string Refrence { get; set; }
    public string Maker { get; set; }
    public string Subject { get; set; }
    public DateTime? StartTimeArea { get; set; }
    public DateTime? EndTimeArea { get; set; }
    public int Type { get; set; }
    public bool IsAvtive { get; set; }
    public DateTime? EnacmentTime { get; set; }
}

2. 修改控制器接口参数

public IActionResult Search([FromBody] SearchRequest request)

无需修改前端代码，接口即可正常接收参数，后续直接访问request对象的对应属性即可拿到检索条件。

其他可选方案（不推荐） #

如果你坚持要用string类型接收原始JSON串，可修改前端传参逻辑，对序列化后的JSON对象再做一次序列化，让请求体变为纯字符串格式：

// 原来的data已经是JSON.stringify(搜索对象)的结果，再包一层序列化
axios.post('/api/searchPost/search', JSON.stringify(data),{
    headers: headers
})

该方案拿到参数后需要你手动调用JsonSerializer.Deserialize把string反序列化为对象才能使用，额外多了一步处理逻辑。

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