VUE+Spring前后台传值的坑，后台接收的String参数在末尾会出现 “=”

一、问题

VUE+SpringBoot做增删改查时，前端使用axios.post发起请求，传输主键字符型参数 taskId 到后台，后台再进行删除处理。

实际过程中发现后台拿到的数据再末尾多了一个等号，但是通过console.log(taskId)前台打印参数是正常的，如图。

前台打印log：

后台接收：

二、原因

经过查资料发现前台发送数据的消息体的格式不同的导致。 

前端 Axios 的请求发送方式以及后端 Spring Boot 的 @RequestBody 注解的使用方式不匹配有关。

前端代码:

//使用字符串 'taskid'，代表实际的参数值
axios.post('/deleteTask', 'taskid')  
.then(response => {    
    console.log(response);    
})  
.catch(error => {    
    console.error(error);    
});

后端代码：

@PostMapping("deleteTask")
@ApiOperation(value = "删除任务")
public Result<Object> deleteTask(@RequestBody String taskId) {  
    log.info("deleteTask入参:{}", taskId);  
    return new Result<>().ok(archiveDownloadService.deleteTask(taskId));  
}

axios.post 的第二个参数是一个字符串 'taskid'，而不是一个 JSON 对象或 FormData 实例。当 Axios 发送这个请求时，它默认不会将字符串包装成 JSON（因为字符串不是对象），也不会设置 Content-Type 为 application/json（虽然在某些情况下，如果之前设置了全局的 Content-Type，它可能会保持那个设置）。但是，由于没有显式设置 Content-Type，并且发送的是一个简单的字符串，Axios 的行为可能会依赖于其内部实现或浏览器的默认行为，这可能会导致请求体内容或 Content-Type 头部不是想象中的默认application/json。此时的Content-Type应该是application/x-www-form-urlencoded;charset=UTF-8。

这是一种键值对的数据结构，前端传过来的内容是放在k中，v为空，而Spring Boot 并没有将请求体解析为 JSON（因为 Content-Type 不是 application/json），而是直接尝试将请求体的内容作为字符串读取，这时候取值时，内容就变成了k=,也就是为什么后端接收的数据，末尾多了一个＝。

同时后端代码使用的@RequestBody接收参数，@RequestBody接收一个简单的字符串时，Spring Boot 会尝试将请求体中的内容解析为 JSON（如果 Content-Type 是 application/json），但由于请求体可能只是一个简单的字符串 'taskid' 而不是有效的 JSON（如 {"taskId":"taskid"}），解析过程可能会失败或产生意外的结果。

三、解决

1. 更改前端请求：设置 Content-Type 为 application/json。

   //使用字符串 'taskid'，代表实际的参数值
   axios.post('/deleteTask', 'taskid', {
           headers: {'Content-Type': 'application/json'}
   })  
   .then(response => {    
       console.log(response);    
   })  
   .catch(error => {    
       console.error(error);    
   });

2. 更改后端接收方式:将post改成get使用 @RequestParam 而不是 @RequestBody 来接收。