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

一、问题

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

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

前台打印log:

后台接收:

二、原因

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

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

前端代码:

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

后端代码:

java 复制代码
@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-Typeapplication/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-Typeapplication/json),但由于请求体可能只是一个简单的字符串 'taskid' 而不是有效的 JSON(如 {"taskId":"taskid"}),解析过程可能会失败或产生意外的结果。

三、解决

  1. 更改前端请求 :设置 Content-Typeapplication/json

    javascript 复制代码
    //使用字符串 '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 来接收。

相关推荐
ponnylv15 分钟前
深入剖析Spring Boot启动流程
java·开发语言·spring boot·spring
沙白猿17 分钟前
【 苍穹外卖 | Day2】
spring
西陵26 分钟前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld33 分钟前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷2 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军2 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离2 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw3 小时前
鸿蒙工程版本与设备版本不匹配
前端
gnip3 小时前
http缓存
前端·javascript