码农知识堂 - 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 来接收。
      
                
                    
                

                
    7. 

                    相关阅读:
      
                    
Unity3D URP 仿蜘蛛侠风格化Bloom&AO                            
      
云原生系列 六【轻松入门容器基础操作】                            
      
LiveNVR监控流媒体Onvif/RTSP功能-Onvif 发现以及探测通过ONVIF添加摄像头监控直播及云台控制                            
      
【Kafka一】概述                            
      
传统机器学习笔记7——GBDT模型详解                            
      
2023年上海市安全员B证证模拟考试题库及上海市安全员B证理论考试试题                            
      
【Java基础】注释、关键字、常量及数据类型                            
      
nodejs+vue+elementui毕业设计论文选题过程管理系统                            
      
HTML+CSS+JS静态网页设计【二十四节气】期末课程大作业                            
      
解决django跨域问题详解                            
      
                          
                
      8. 
                
    8. 
                    原文地址：https://blog.csdn.net/Zhu_daye/article/details/141054681
                
      9. 

            
        

        
      
            
        
                
      • 
                    最新文章
                
        • 
                
      • 
                    
攻防演习之三天拿下官网站群                            
        
数据安全治理学习——前期安全规划和安全管理体系建设                            
        
企业安全 | 企业内一次钓鱼演练准备过程                            
        
内网渗透测试 | Kerberos协议及其部分攻击手法                            
        
0day的产生 | 不懂代码的"代码审计"                            
        
安装scrcpy-client模块av模块异常，环境问题解决方案                            
        
leetcode hot100【LeetCode 279. 完全平方数】java实现                            
        
OpenWrt下安装Mosquitto                            
        
AnatoMask论文汇总                            
        
【AI日记】24.11.01 LangChain、openai api和github copilot                            
        
                            
                
        • 
            
      

            
        
                
      • 
                    热门文章
                
        • 
                
      • 
                    
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！                            
        
奉劝各位学弟学妹们，该打造你的技术影响力了！                            
        
五年了，我在 CSDN 的两个一百万。                            
        
Java俄罗斯方块，老程序员花了一个周末，连接中学年代！                            
        
面试官都震惊，你这网络基础可以啊！                            
        
你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法                            
        
心情不好的时候，用 Python 画棵樱花树送给自己吧                            
        
通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！                            
        
13 万字 C 语言从入门到精通保姆级教程2021 年版                            
        
10行代码集2000张美女图，Python爬虫120例，再上征途                            
        
                            
                
        • 
            
      

        
      
    




    
    
    
    

      
    
      
        
      
            
      
                
      
                    Copyright © 2022 侵权请联系2656653265@qq.com   
                    京ICP备2022015340号-1
                
      
                
      
                    正则表达式工具
                    cron表达式工具
                    密码生成工具
                
      
                
      
                    
                    
      京公网安备 11010502049817号