.Net Core API Post请求无法接收React Axios传递的参数对象问题

问题根因 #

你遇到的问题是前后端参数绑定规则不匹配导致的，分两种场景说明：

• 当后端用[FromForm]特性时，会从请求的表单字段中按键名匹配模型的属性名，要求表单字段名和Tester类的属性Word1/Word2/Word3完全对应
• 当后端用[FromBody]特性时，会从请求体中读取JSON格式数据反序列化为模型，要求请求头的Content-Type为application/json，且请求体结构和Tester类匹配

方案1：保留后端[FromForm]写法，调整前端请求 #

后端代码无需修改，前端按以下方式构造FormData：

const sendToServer = () => {        
    let data = new FormData();
    // 直接对应Tester类的属性名添加表单字段，不要套`tester`父级key
    data.append("Word1", "abc");
    data.append("Word2", "def");
    data.append("Word3", "ghi");

    axios
        .post(
            '<my server>', 
            data
        )
        .then(result => {
            console.log(result.data);
        })
    ;
}

说明：发送FormData时Axios会自动设置正确的Content-Type: multipart/form-data请求头，无需手动指定

方案2：后端改为[FromBody]，调整前端请求 #

首先修改后端接口参数特性：

[Authorize]
[HttpPost("Test1")]
// 把[FromForm]改为[FromBody]
public async Task<IActionResult> Test1([FromBody] Tester test)
{
    return Ok();
}

前端调整请求逻辑，无需序列化也不用FormData，直接传JS对象即可，Axios会自动处理序列化和请求头：

const sendToServer = () => {        
    const test = {Word1: "abc", Word2: "def", Word3: "ghi"};

    axios
        .post(
            '<my server>', 
            test
        )
        .then(result => {
            console.log(result.data);
        })
    ;
}

说明：之前改[FromBody]后报415错误，是因为你传了FormData格式数据，和后端要求的JSON格式不匹配导致的，按上述写法即可解决

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