Spring Boot接收Vue axios POST单值时提示testparam参数不存在问题求助

问题原因 #

axios发送POST请求时默认会把传入的对象参数序列化为JSON格式放到请求体中，请求头Content-Type默认为application/json；而Spring Boot中@RequestParam注解只能获取URL拼接的查询参数、以及Content-Type为application/x-www-form-urlencoded或multipart/form-data格式的表单参数，无法从JSON请求体中读取参数，因此会抛出参数不存在的错误。

解决方案 #

方案1：调整前端传参逻辑，适配后端@RequestParam接收 #

有两种常用的实现方式：

方式1：将参数放到URL查询参数中

调用axios时将参数放到params配置项中，参数会自动拼接在请求URL后：

axios
    .post("url/test", {}, {
        params: {
            testparam: 1
        }
    })
    .then((response) => {
        console.log(response.data);
    })
    .catch((error) => {
        console.log(error.message);
    });

方式2：序列化为表单格式提交

使用FormData封装参数，或者用qs库序列化对象，请求会自动适配为@RequestParam可识别的表单格式：

// 方法A：使用FormData
const formData = new FormData();
formData.append('testparam', 1);
axios.post("url/test", formData)

// 方法B：使用qs序列化（需先安装qs库）
import qs from 'qs'
axios.post("url/test", qs.stringify({testparam: 1}))

方案2：调整后端接口逻辑，适配前端JSON传参 #

使用@RequestBody注解接收JSON格式的请求体：

方式1：用Map接收单个参数

@PostMapping(path = "/test")
@ResponseBody
public Integer test1(@RequestBody Map<String, Object> param) {
    Integer testparam = (Integer) param.get("testparam");
    System.out.println(testparam);
    return testparam;
}

方式2：封装DTO实体类接收（参数较多时更推荐）

先定义参数接收类：

// 需引入lombok的@Data注解，也可手动写getter/setter
@Data
public class TestParamDTO {
    private Integer testparam;
}

接口修改为：

@PostMapping(path = "/test")
@ResponseBody
public Integer test1(@RequestBody TestParamDTO dto) {
    Integer testparam = dto.getTestparam();
    System.out.println(testparam);
    return testparam;
}

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