解决 Vue+SpringBoot中axios发送数据后端接收不到

最新推荐文章于 2023-11-09 21:00:22 发布
最新推荐文章于 2023-11-09 21:00:22 发布
阅读量1.4w 收藏 20
点赞数 3
分类专栏： 前端Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q297896911/article/details/86739700
版权
在学习阶段遇到Vue使用axios发送数据至SpringBoot后端时，数据无法被接收。解决办法是：对于POST请求，SpringBoot的Controller需使用@RequestBody注解；GET请求则不需要。本文分别介绍前后端的解决策略，包括使用@RequestBody处理JSON内容，以及前端引入qs库进行数据转换。同时，针对跨域导致的两次请求问题，提供了设置超时时间的解决方案。
摘要由CSDN通过智能技术生成

由于是学习阶段，在接收数据的时候，发现前端发送数据正常，后端服务器接收不到？

这是怎么回事呢？网上查了很多方法，最后发现  如果是 post方式提交需要在

 SpringBoot项目中的Controller 接收参数的时候用@RequestBody 注解一下就行了；get方式则不需要注解

本文章分为前端、后端 两种解决方法，二选一  

1.后端解决方法：

简单说明一下：因为post方式提交的时候会包装成一个json字符串，而get方式传参时 直接追加到地址后面，因此 后台接收get请求不用@RequestBody 注解

前端页面发送数据，添加一个名称。

 

可以看出Content-Type是 application/json;charset=UTF-8

axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据 

但问题就麻烦在这：服务端要求的 'Content-Type': 'application/x-www-form-urlencoded'

怎么解决呢，由于懒，直接改了Controller， 在接收数据这里 @ResquestBody注解一下

最低0.47元/天 解锁文章
Freedom______
关注
专栏目录
springboot post请求 使用@RequestBody接收不到json数据
qq_45644484的博客
05-10 1万+
关于post请求 使用@RequestBody接收不到json数据问题 今天遇到一个不知道以前有没有遇到过的问题，啥都不说先上图 我的控制层是这样的，标准的post请求，@RequestBody接收 我的实体类是这样的，刚开始没有加@JsonProperty这个注解 代码写完之后，就一脸轻松的到postman上去测试了一下， 没想到结果挺尴尬的竟然没有接收到数据，看起来代码没有一点毛病。 无数个呢吗之后，我就把实体类里的一些参数首字母改成小写了，之前也是一直用驼峰命名的，这个命名
【纠错】Vue+SpringBoot中axios发送数据后端为null的两种分析
qq_40743463的博客
03-13 3025
本人小白，有错误后期再改 框架：Vue+SpringBoot+Mybatis 一、post方式会提交json字符串，在前后端数据交换出问题 1.后端解决方法：接收参数时添加@RequestBody转换为java对象 Handle.java @PostMapping("/save") public void save(@RequestBody Book book){ boo...
axios+springboot 报错 POST http://localhost:8080/Login 404 (Not Found)
kh3064的博客
07-17 1万+
问题：点击登录，页面无跳转，报错： POST http://localhost:8080/Login 404 (Not Found) Uncaught (in promise) Error: Request failed with status code 404 原因：8080是前端vue的端口号，后端springboot没有配置自定义的端口号，这个请求就找不到后台了。 解决方法： 步骤一：在vue中的main.js文件为axios指明baseURL，即设置以下代码： var axios = requi
vue开发中使用axios的post方法传递参数springmvc接受不到参数
zona
04-27 4442
背景： 前后端分离项目中， 前端vue项目使用axios发起请求。 spring的controller中习惯使用@requestMapping注解，发现使用post请求时，后端接口不使用实体无法接受到参数， 前端参数必须经过处理才能接受到。 get请求在参数格式不对的情况下，也会导致controller无法接受到参数。 post请求参数需要特殊处理主要和请求头的格式有关， 如：applica...
axios传的值 后端取不到
A9541170的博客
11-19 685
问题描述 springboot后端取不到axios传来的值，controller方法执行了，但是打印的username和password是null 前端 后端 后台输出 null 分析思路 打开控制台 经过一番百度发现 axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据 发现 以往的表单类型 formData 变成了Request Payload Contentype也变成了application/json而不是application/x-www-form-urlencoded
Springboot使用axios传参后后台无法接收
qq_60440599的博客
09-12 1699
Springboot使用axios传参后后台无法接收
vue2前端使用axios发起post请求，后端(springboot)拿不到值解决办法
最新发布
m0_53428367的博客
11-09 4894
vue2前端使用axios发起post请求，后端(springboot)拿不到值解决办法
使用VUE+SpringBoot+EasyExcel 整合导入导出数据
个人学习使用
05-14 980
使用VUE+SpringBoot+EasyExcel 整合导入导出数据 创建一个普通的maven项目即可 项目目录结构 1 前端 存放在resources/static 下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge
springboot后台接收axios传递的json数据为null
01-21
后台接收到的数据一直显示null 原因： 使用@RequestBody标签接收json数据，参数类型不能用Sting 看这两个注解的作用 @RequestParam 是作用在形参列表上，RequestParam可以接受简单类型的属性，也可以接受对象类型。...
如何解决@RequestParam无法接收vue+axios传递json数据（csdn）————程序.pdf
12-05
总结，当Vue+Axios与SpringBoot结合使用时，需注意数据传输的格式以及后端接收方式的选择。在发送JSON数据时，确保后端使用@RequestBody注解，并设置合适的Content-Type，这样才能确保数据的顺利传递。
解决axios post 后端无法接收数据的问题
10-16
今天小编就为大家分享一篇解决axios post 后端无法接收数据的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 前端 put 或 post 请求发送到 Spring Boot 后端无法接收到数据的解决方法
九思的博客
12-14 3759
项目场景： Vue前端向Spring Boot后端发送put或post请求，使用axios 问题描述： Vue前端向Spring Boot后端发送数据，使用的是post或是put请求时，后端获取不到数据，显示为空 原因分析： axios默认post请求格式为json，但spring boot默认不使用json格式解析 解决方案： 1、后端处理 在controller方法中的参数前面加入@RequestBody 例： @PostMapping public void add(@Reques
axios发送的参数后端接收不到
make_progress的博客
01-30 3469
1 后端接收不到的原因 axios发送参数后端接收不到的原因是发送请求的数据格式不对（排除错误的情况），前端发送数据时Content-Type有两种方式，一种是'Content-Type':'application/json;charset=utf-8'，另一种是'Content-Type': 'application/x-www-form-urlencoded'。axios的post/get方法默认使用的是'Content-Type':'application/json;charset=utf-8'，即
vue使用axios发送post请求携带json body参数，后端使用@RequestBody进行接收
热门推荐
见证自己学习,成长的记录
02-17 2万+
最近在做自己项目中，做一个非常简单的新增用户场景，但是使用原生axios发送post请求的时候，还是踩了不少坑的。唉，说多了都是泪，小小一个新增业务，在自己前后端一起开发的时候，硬是搞了好久。下面就把问题总结分享下，防止后人再踩坑。首先先看下我的接口定义吧。其实就是一个很简单的新增，参数也不复杂。
springboot+vue 前端Json传参后端接收不到
YH_Nothing的博客
11-24 4140
自己遇见的几种情况，在这记录一下，因为当时查的时候情况太多了，还有可能是request内部或者ajax的content-type的问题，就很多！！！ （1、请求方式：post、get） （2、请求方式所写位置（反正我是遇到了）组件内部和单写一个js来暴露方法） （3、request.js内部或者ajax的属性content-type） （4、有可能你用的request.js内部人家是封装了一层的所以后边接到） （5、@RequestParam与@RequestBody两个注解的使用） （6、后边用map来接
vue中当前端请求后端接口时，可以请求成功，状态是200，但是后端缺拿不到请求参数，返回的数据为空。
W78955的博客
04-20 3574
vue中当前端请求后端接口时，可以请求成功，状态是200，但是后端缺拿不到请求参数，返回的数据为空。
解决用axios发送请求，后台接收不到请求数据的问题
一条吃软饭的软狗
08-27 4026
在&lt;script&gt;&lt;/script&gt;里增加以下代码 var HTTP = axios.create({ baseURL:'http://localhost:8081/', //这是基础url headers: {'Content-Type': 'application/x-www-form-urlencoded'}, transfor...
axios发送的数据在后端获取不到
qq_39304439的博客
02-11 462
已知发送的json数据如下 后端也用@RequestBody注解接收了。然而还是获取不到前端数据。 输出 思考一下应该是字段映射关系,从数据库到后端代码到前端的字段逐一检查 最后发现是前端的字段名字跟实体类的字段不一样的结果。把实体类稍微改下 最后成功获取到值并存储到数据库中(补充一点:后端用的是jpa(如果实体类字段名articleTitle)是可以映射到数据库的article_tilt...
如何解决@RequestParam无法接收vue+axios传递json数据
sunnygao的博客
11-24 4447
文章目录axios的post请求无法发送到后端1.问题 ： axios的post的传递的json数据无法接收2.问题代码3.问题归因4.问题解决5.查漏补缺 axios的post请求无法发送到后端 1.问题 ： axios的post的传递的json数据无法接收 ​ 问题背景：SpringBoot+Vue测试开发项目前后端联调，发现axios的post请求向后端传递的参数，后台无法收到。 2.问题代码 public CommonResult TestDriver( @RequestP
vue+springboot+element上传表单数据和文件同时上传
05-12
在端，可以使用 Element UI 的 Upload 组件来上传文件，同时将表单数据也一并提交到后端。具体代码如下： ```html <template> <el-form :model="form" label-width="120px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="头像"> <el-upload class="avatar-uploader" action="/api/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', avatar: '' }, imageUrl: '' } }, methods: { handleAvatarSuccess(res, file) { this.form.avatar = res.url this.imageUrl = URL.createObjectURL(file.raw) }, beforeAvatarUpload(file) { // 限制上传图片的大小和格式 const isJPG = file.type === 'image/jpeg' const isPNG = file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG && !isPNG) { this.$message.error('上传头像图片只能是 JPG/PNG 格式!') return false } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!') return false } return true }, submitForm() { this.$refs.form.validate(valid => { if (valid) { const formData = new FormData() formData.append('name', this.form.name) formData.append('avatar', this.form.avatar) // 将表单数据和文件一起提交到后端 this.$http.post('/api/user', formData).then(res => { this.$message.success('提交成功') }).catch(error => { this.$message.error('提交失败') }) } else { this.$message.error('表单验证失败') return false } }) } } } </script> ``` 在后端，使用 Spring Boot 的 MultipartFile 类型来接收上传的文件，并在 Controller 中处理表单数据和文件上传的逻辑。具体代码如下： ```java @RestController @RequestMapping("/api") public class UserController { @PostMapping("/user") public ResponseEntity<?> createUser(@RequestParam("name") String name, @RequestParam("avatar") MultipartFile avatar) { // 处理表单数据和文件上传的逻辑 // ... return ResponseEntity.ok().body("创建用户成功"); } } ``` 需要注意的是，由于使用了 FormData 对象来提交表单数据和文件，因此需要在前端使用 axios 或者其他 HTTP 请求库来发送 POST 请求。在上面的代码中，我使用了 Vue.js 的官方插件 vue-resource 来发送 POST 请求。如果您使用的是 axios，则可以将代码修改为： ```javascript import axios from 'axios' submitForm() { this.$refs.form.validate(valid => { if (valid) { const formData = new FormData() formData.append('name', this.form.name) formData.append('avatar', this.form.avatar) // 将表单数据和文件一起提交到后端 axios.post('/api/user', formData).then(res => { this.$message.success('提交成功') }).catch(error => { this.$message.error('提交失败') }) } else { this.$message.error('表单验证失败') return false } }) } ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值