vue-axios post请求发送的数据后台无法接受到的问题

最新推荐文章于 2022-11-26 15:04:00 发布
最新推荐文章于 2022-11-26 15:04:00 发布
阅读量515 收藏 1
点赞数 1
文章标签： vue axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43674113/article/details/84849251
版权 
this.axios.post(`http://blog2.test/Home/Index/update`,this.data)

我们这样向后台发送数据，后台接受不到一直是空数据，这种情况我们，在后台直接打印发现是把数据当成一个key指向了一个字符串，我们是需要正常的对象来取数据

我们需要对数据格式进行转换，需要引入转换包
JS中

var qs = require('qs')


this.axios.post(`http://blog2.test/Home/Index/update`,qs.stringify(this.data))

这样之后就可以使用数据了

渡目成书
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue-axios-post数据后端接不到问题解决
11-29
最近在前后端联调的时候发现了一个问题，可能自己平时不注意发送的内容格式，导致解决问题的路上，走了很多弯路，尤其是在刚刚懂了一点Vue知识之后，发送请求的各种花式写法也是让人头大，我在这把我踩到的坑给大家...
使用axios传递参数，后端接收为null
weixin_43934513的博客
08-28 4784
使用axios传递参数，后端接收为null 1、请求如下： 请求接口'/login'，有用户名和密码两个参数。 const res = await this.$http.post('login',{username:this.loginForm.username,password:this.loginForm.password}) （1）postman测试接口，结果成功，说明后端接口没有问题，JSON字符串如下： { "username": "admin2", "password
关于vue- axios的post请求到后台数据为空的两种解决方法
热门推荐
yezongzhen的博客
03-02 1万+
在vue里面的这种情况是默认使用get方式传值到后台，当你数据过大的时候，会导致你的拼接长度有限。 然后稍微改成这样: 这样就会使得与后台的交互方式为POST请求。但是出现了后台接到的值为空的现象。后面对比ajax发现axios传值，再具体观察控制台发现 ajax方式： 一个Request Payload，一个Form Data。 将Request Payload...
vue axios解决后台没法收到数据的问题
ColourfulTiger的博客
06-18 1353
之前有一篇文章中由于没有测试后台数据这一块，现在这篇为前一篇的补充，主要是解决数据通过ajax的传输问题，以及后台怎样获取到前端通过data传过去的值的问题。     首先用axios来写ajax形式的传输代码    （1）使用input中的v-model来赋值      var username = this.user;      var password = this.pass;      t...
记录:解决vue axios post后台接收不到数据
ydZ157的博客
04-24 2582
参考的博主给了好几种解决方案，我使用的是Qs，并修改请求头的方式； 主要原因就是axios内部的post方法进行了JSON.stringify转化，导致参数格式不一致。 1.在请求封装的方法里引入Qs import Qs from 'qs' 2.修改请求头为 headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'} 大工告成！ 参考博客: ​​​​​​​https://www.csdn.net/t
前端传到后端的json数据的key有大写字母开头，后端接收不到数据
Jayden的博客
05-20 1303
前端传到后端的json数据的key有大写字母开头，后端接收不到数据 前端json { “P”: "3.1415926" } 后端接收参数对象 public class Path { /** 加上该注解可解决问题 */ @JsonProperty private String P; ...省略getter, setter方法 } 后端接口 public void test (@RequestBody Path path) { System.out.println(path.getP()); }
vue使用axios发送post，后端无法接收问题
Touale的博客
03-01 854
关乎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
clickHouse MergeTree核心原理
qq_32323239的博客
11-07 636
ClickHouse在Centos、Redhat下的安装 ClickHouse可以在任何具有x86_64，AArch64或PowerPC64LE CPU架构的Linux，FreeBSD或Mac OS X上运行。 虽然预构建的二进制文件通常是为x86 _64编译并利用SSE 4.2指令集，但除非另有说明，否则使用支持它的CPU将成为额外的系统要求。这是检查当前CPU是否支持SSE 4.2的命令： grep -q sse4_2 /proc/cpuinfo && echo "SSE 4..
解决Vue axios post请求,后台获取不到数据的问题方法
10-18
今天小编就为大家分享一篇解决Vue axios post请求,后台获取不到数据的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue中post方式提交数据后台无法接收的问题
10-18
今天小编就为大家分享一篇解决vue中post方式提交数据后台无法接收的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue axios post发送复杂对象问题
12-10
现在vue项目中，一般使用axios发送请求去后台拉取数据。 在某些业务场景中，前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式（post/get等），但如果不做其他配置，post的...
axios 使用post方式传递参数，后端接受不到
weixin_34293902的博客
12-29 1596
最近做vue项目，做图片上传的功能，使用get给后台发送数据，后台能收到，使用post给后台发送图片信息的时候，vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错，显示 request URI too large后台显示一直没有收到数据 参数为null。网上查看了很多资料，才知道axios...
springboot-postman测试接口正常，但基于vue的前端表单post提交到后端，后端接收不到数据
qq_42913378的博客
05-09 4181
分析问题 postman接口测试正常，说明服务端正常启动，能够将数据传入后端进行处理后返回token。 在前端的post表单提交的话，虽然能够返回值，但是是以未传入数据的情况返回的。 解决过程 我分析是前端表单提交出错，因为postman能够正常提交数据。但是在网页发送请求后的请求体上面核对，数据的名称和value值都是正确的，所以数据正常发送后端。 所以大致确定是后端接收数据端问题。 接收数据出错，就可以定位在controller中出错。 这个POST接收方法是用bean接收，在接收形参前面没有加
vue发送post请求到SpringBoot后端，但后端接收不了参数的问题
qq_41984067的博客
11-26 1301
vue发送post请求到SpringBoot后端，但后端接收不了参数的问题
vue-cli proxy post json body 一直pending，后台接收不到body数据
supersyd的专栏
07-29 493
vue-cli proxy post json body 一直pending，后台接收不到body数据
vue中post方式提交数据后台无法接收
Bright2017的博客
08-16 1万+
vue中post方式提交数据后台无法接收
vue中的axios发送post请求，后台无法接受到数据
dlpu_fan的博客
08-24 594
最近在学vue，当我使用自己搭建的后台，尝试发送post请求时，后台迟迟接收不到数据，而使用postman就没这个问题，在查找了大量资料后，我发现了是vue在发送请求时序列化的问题，应该把数据先序列化再发送到后台，而使用原生js的JSON.stringify却无效，于是我安装了qs（npm install qs），并在vue中使用qs.stringify，后台可以接收到数据了，经过打印两者得知JSON.stringify是将数据json化了，而qs.stringify是将数据用&连接，后者可以被识别
vue3.0 axios封装请求微服务后台
最新发布
04-05
前置知识： - Vue3.0 - Axios - 微服务 Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js。在Vue中，我们通常使用Axios来发送HTTP请求。 微服务是一种面向服务架构的软件设计风格。它把一个应用划分为一些小的、独立的、可替换的服务，每个服务运行在自己的进程中，服务之间通过轻量级通信机制互相协作。微服务架构可以提高应用的可伸缩性和可维护性。 下面是一个基于Vue3和Axios的微服务请求封装示例： 1. 安装Axios ``` npm install axios ``` 2. 创建axios实例 ```js import axios from 'axios' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 微服务请求的基础路径 timeout: 5000 // 超时时间 }) // 请求拦截器 service.interceptors.request.use( config => { // 在请求发送之前做些什么 return config }, error => { // 对请求错误做些什么 console.log(error) // for debug return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { // 对响应数据做些什么 const res = response.data if (res.code !== 20000) { // 如果响应状态码不是20000，则视为错误 return Promise.reject(new Error(res.message || 'Error')) } else { return res } }, error => { // 对响应错误做些什么 console.log('err' + error) // for debug return Promise.reject(error) } ) export default service ``` 3. 封装请求方法 ```js import request from '@/utils/request' export function getUserInfo() { return request({ url: '/user/info', method: 'get' }) } export function login(data) { return request({ url: '/user/login', method: 'post', data }) } export function logout() { return request({ url: '/user/logout', method: 'post' }) } ``` 在组件中使用： ```js import { getUserInfo } from '@/api/user' export default { name: 'HelloWorld', created() { getUserInfo().then(response => { console.log(response) }) } } ``` 这样就完成了基于Vue3和Axios的微服务请求封装。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值