码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • VUE+Spring前后台传值的坑,后台接收的String参数在末尾会出现 “=”


    一、问题

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

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

    前台打印log:

    后台接收:

    二、原因

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

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

    前端代码:

    1. //使用字符串 'taskid',代表实际的参数值
    2. axios.post('/deleteTask', 'taskid')
    3. .then(response => {
    4. console.log(response);
    5. })
    6. .catch(error => {
    7. console.error(error);
    8. });

    后端代码:

    1. @PostMapping("deleteTask")
    2. @ApiOperation(value = "删除任务")
    3. public Result deleteTask(@RequestBody String taskId) {
    4. log.info("deleteTask入参:{}", taskId);
    5. return new Result<>().ok(archiveDownloadService.deleteTask(taskId));
    6. }
    7. 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。
        1. //使用字符串 'taskid',代表实际的参数值
        2. axios.post('/deleteTask', 'taskid', {
        3. headers: {'Content-Type': 'application/json'}
        4. })
        5. .then(response => {
        6. console.log(response);
        7. })
        8. .catch(error => {
        9. console.error(error);
        10. });
      2. 更改后端接收方式:将post改成get使用 @RequestParam 而不是 @RequestBody 来接收。
    8. 相关阅读:
      Xilinx FPGA 使用Microblaze实现串口命令行
      Compare线刷包与卡刷包
      三十三、【进阶】索引的分类
      递归学习——记忆化搜索
      LyScript 内存交换与差异对比
      Pandas GroupBy 深度总结
      windows server 2012安装教程
      AWS SAA C003 #29
      python中图片读取和保存以及plt.imshow()与cv2.imshow()显示图像颜色错误解决方案
      怎么备份笔记本电脑数据?
    9. 原文地址:https://blog.csdn.net/Zhu_daye/article/details/141054681
      • 最新文章
      • 【JVM】编译执行与解释执行的区别是什么?JVM 使用哪种方式?
        用 Hashids 优雅解决 C 端自增 ID 暴露问题
        V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
        LLVM Pass快速入门(四):代码插桩
        milkup:桌面端 markdown AI续写和即时渲染
        基于项目工程构建SBOM(软件物料清单)的研究
        鸿蒙应用开发UI基础第二节:鸿蒙应用程序框架核心解析与实操
        .NET 中如何快速实现 List 集合去重?
        扣子Coze实战:从0到1打造抖音+小红书热点监控智能体
        浅谈数据访问层
      • 热门文章
      • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
        奉劝各位学弟学妹们,该打造你的技术影响力了!
        五年了,我在 CSDN 的两个一百万。
        Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
        面试官都震惊,你这网络基础可以啊!
        你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
        心情不好的时候,用 Python 画棵樱花树送给自己吧
        通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
        13 万字 C 语言从入门到精通保姆级教程2021 年版
        10行代码集2000张美女图,Python爬虫120例,再上征途
      小工具 小游戏
      Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

      京公网安备 11010502049817号