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 来接收。

相关推荐
netyeaxi1 小时前
Java:使用spring-boot + mybatis如何打印SQL日志?
java·spring·mybatis
中微子1 小时前
React状态管理最佳实践
前端
小七mod1 小时前
【MyBatis】MyBatis与Spring和Spring Boot整合原理
spring boot·spring·mybatis
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子1 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258592 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app