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

最新推荐文章于 2023-11-15 20:24:47 发布
最新推荐文章于 2023-11-15 20:24:47 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： springboot 文章标签： spring boot vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45708267/article/details/116332603
版权

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

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

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

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

前端页面发送数据，添加一个名称。
1、引用自己定义的请求接口
在这里插入图片描述
2、自定义的接口请求
在这里插入图片描述
3、查看 NewWork 里面的信息
在这里插入图片描述
可以看出Content-Type是 application/json;charset=UTF-8

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

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

怎么解决呢，这里我直接封装实体类，然后改了Controller， 在接收数据这里 @ResquestBody注解一下

在这里插入图片描述
在这里插入图片描述
因为@requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容，比如说：application/json或者是application/xml等。一般情况下来说常用其来处理application/json类型。

因为涉及到跨域，每次请求都是两次，感觉很浪费，怎么解决呢？ 百度上搜到一个简单的解决方案，设定一个超时时间

饭上的爱豆
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
结合Vue+axios+SpringBoot开发的用户管理系统
12-15
结合Vue+axios+SpringBoot开发的用户管理系统，包括整合mybatis，实现前后端分离，满足一个基本用户管理系统的增删改查
vue+springboot网页商城项目
06-12
5个github上的vue+springboot商城项目，内涵不同的操作页面，风格各一。下载前提是懂vue和springboot哦，不然环境都搭不好就很尴尬啦~
springboot+vue项目在交互时前端发送请求后端接收不到（记录）
zrulin的博客
05-02 2597
记录一下我在springboot+vue项目在交互时前端发送请求（发送get请求）后端接收不到数据，报错：` Required request parameter 'currentPage' for method parameter type Integer is not present`
vue使用axios发送post，后端无法接收问题
Touale的博客
03-01 865
关乎vue的axios问题 最初用axios作为一个post发送，发送代码如下： axiosN .post(path,data) .then(response => { console.log(response.data) this.dialogFormVisible = false this.$notify({ title: "提示", message: response.data.msg, type: response.dat
【kafka】springboot工程能发消息，不能收消息
YuuuPeeiiiii的博客
11-14 434
初学，起了一个springboot项目，写了一个生产者和一个消费者，能给集群kafka发消息，但是收不到，排查了种种！问题，结果时因为，springboot没能扫到我注册的component，我真服了…各位还得注意一下，这俩扫描器的冲突，你就学吧，一学一个不吱声。
转 axios 发 post 请求，后端接收不到参数的解决方案
六种鱼的博客
06-27 1328
转自 https://blog.csdn.net/csdn_yudong/article/details/79668655问题场景问题原因要点1要点2问题分析解决方案解决方案一解决方案二解决方案三解决方案四解决方案五解决方案六问题场景场景很简单，就是一个正常 axios post 请求：axios({ headers: { 'deviceCode': 'A95ZEF1-47...
springboot前端传值后端无法接收数据
YX_PJJuan的博客
10-16 4166
springboot前端传值后端无法接收数据
vue使用axios通过post向springboot传递数据，后台接收为null
m0_64457414的博客
04-07 374
改成这样，结果就可以了！，我的后台可以接收到数据了，我也不晓得为啥子。前端通过vue使用axios原先这样写,后台@通过参考这位博主所说：等会编辑写上。愣是接收不到数据，气死了。
vue2前端使用axios发起post请求，后端(springboot)拿不到值解决办法
m0_53428367的博客
11-09 3890
vue2前端使用axios发起post请求，后端(springboot)拿不到值解决办法
Vue 前端 put 或 post 请求发送到 Spring Boot 后端无法接收到数据的解决方法
九思的博客
12-14 3479
项目场景： 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
SpringBoot+VUE+Axios 【链接超时】 后端正常返回结果，前端却出现错误无法接收数据
weixin_45928161的博客
04-14 2983
错误提示表明前端发送的请求在默认的 2500ms 超时时间内没有得到服务器的响应，导致请求失败。timeout通过以上方法中的任意一种或多种，都可以尝试解决 Vue 前端发送请求超时的问题。
Vue+SpringBoot+SpreadJS 实现的在线文档功能.docx
07-12
Vue+SpringBoot+SpreadJS 实现的在线文档功能.docxVue+SpringBoot+SpreadJS 实现的在线文档功能.docxVue+SpringBoot+SpreadJS 实现的在线文档功能.docxVue+SpringBoot+SpreadJS 实现的在线文档功能.docxVue+...
基于Vue+SpringBoot+WebSocket实现Web端聊天系统+网络通信+心跳+客户端服务端+后端java+mysql
06-15
基于Vue+SpringBoot+WebSocket实现Web端聊天系统+网络通信+心跳+客户端服务端+后端java+mysql 项目经过严格测试，确保可以运行！ 下载代码后，先配置好yml文件：数据库和微信号appid、secret（other包下面有数据库）...
Vue-axios-post数据后端接不到问题解决
10-15
主要介绍了Vue-axios-post数据后端接不到问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
SpringBoot + webSocket 实现，和常见问题的解决方式
冰淇淋真好吃
11-09 5348
使用websockt实现实时通讯的功能，这里介绍两种方式 只创建一个聊天的房间，所有人都往里面发送数据，然后接收数据的那一方，通过自己定义的规则，对接收到的数据进行筛选，获取自自己想要的数据。 创建多个两天的房间，每个房间管理自己的聊天信息，接收方不用对数据进行筛选，因为只能接收自己所在房间的信息，所以无需过滤。 将webSocket 整合进SpringBoot（这里有个问题，让我找了半天） ...
spring中，为什么前端明明传了值，后端却接收不到
最新发布
技术分享
11-15 6244
在进行前后端的联调时，有时候会出现，前端明明传了值，后端接口却接收不到的情况，这种情况常常让人很苦恼，然后就会去仔细对比前后端的参数单词是不是对应上了，也会去检查是不是前端的请求参数格式有问题，又或者是后端接口接收的参数格式有问题，一通检查对比下来，发现都没问题。那究竟是为什么呢？
vue2向springboot传值接收不到
Beau Wang
07-08 674
在这个方法中，我们需要向后端传的值有currentPage（当前页码）、pageSize（一页数据条数）和查询的对象。一般传参数时，页数，页面大小等和数据库无关的字段会直接加在url上，@PostMapping("/list。我们在开发项目时，经常会前后端分离，这样方便开发和测试。但是这样写的话，会发现一个问题：前端的参数后端（controller）接收不到。这是后端controller层的方法，通过url来实现方法的调用。原因是在接收前端的参数时需要在后端参数前加注解。注解时，方法必须使用。
Springboot使用axios传参后后台无法接收
qq_60440599的博客
09-12 1601
Springboot使用axios传参后后台无法接收
springboot接收不到vue发送axios请求中的数据
STATICHIT静砸的博客
11-06 1476
但由于前端用params包裹起来了，后端接收的确是params内部的username和password，所以前后端对应不上，导致前端的post请求找不到对应的接口，找不到对应的接口所以报了404错误。表面上看是跨域问题，但是我换一个get方法却可以正常响应，不会报跨域问题，查询资料发现，有时候会因为bad request导致程序以为是跨域的问题，引起跨域问题的报错。或者说，两边都没有问题，只是没有使用同一种格式，这才是问题所在。当时的前端写的，是传出去了参数的，但注意这里的参数最外层是params。
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 } }) } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值