终于明白了vue使用axios发送post请求时的坑及解决原理

摘要:
前言:当我在做一个项目时,我的同事遇到了这个问题,问为什么axios没有发送请求。请求无法接收数据,但报告了错误。下图显示了错误请求。本机vue中的代码如下:this$http:。post('/getMatterList.do',{“matterId”:“1,2,3”})。则((res)=>{console.log(res);})乍一看,它没有什么问题。请求不是这样发送的吗

前言:在做项目的时候正好同事碰到了这个问题,问为什么用axios在发送请求的时候没有成功,请求不到数据,反而是报错了,下图就是报错请求本尊

终于明白了vue使用axios发送post请求时的坑及解决原理第1张

vue里代码如下:

   this.$http.post('/getMatterList.do',{"matterIds":"1,2,3"})
     .then((res)=>{
        console.log(res);
   })

乍一看,没毛病啊,请求不就是这么发的吗,axios官方文档都这么示范的呢,还能有错?我们再来仔细看下浏览器里发出去的请求

终于明白了vue使用axios发送post请求时的坑及解决原理第2张

有没有发现什么蹊跷,传送参数的形式不是我们熟悉的form-data,而是Request Payload。莫慌,其实我们只要做两步设置就可以解决了

  • 用Qs.stringify()将对象序列化成URL的形式,Qs是axios里面自带的,所以直接引入就可以了
  • 设置请求头里的'Content-Type'为'application/x-www-form-urlencoded'
   import Qs from 'qs'
   var data = Qs.stringify({"matterIds":"1,2,3"});
   this.$http.post('/getMatterList.do',data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res)=>{
        console.log(res)
   })

改完之后再来看下,妥妥的了

终于明白了vue使用axios发送post请求时的坑及解决原理第3张

问题是解决了,但是为什么呢?查阅一番资料之后,我又回来啦

HTTP请求中的get请求和post请求参数的存放位置是不一样的,get请求的参数以键值对的方式跟在url后面的,而post请求的参数是以键值对的方式在请求体里的

  • get请求

终于明白了vue使用axios发送post请求时的坑及解决原理第4张

  • post请求

终于明白了vue使用axios发送post请求时的坑及解决原理第5张

为何要设置请求头里的'Content-Type':

我们使用不同请求方式时,参数的传输方式是不一样的,但是服务端在取我们接口的请求参数时,用的方法其实却是一样的,都是使用request.getParameter(key)来获取,其实是因为tomcat在中间会对请求参数进行解析处理,处理完把解析出来的表单参数放在request parameter map中,所以后端就可以通过request.getParameter(key)来统一获取数据,而tomcat解析的时候是怎么知道当前的请求是post请求的呢,就是通过'contentType',当'contentType'为"application/x-www-form-urlencoded",它才会去读取请求体数据。

为何要用Qs.stringify()将对象序列化成URL的形式:

在最开始的时候我们说了,post请求参数是以键值对的形式存在请求体里,用Qs.stringify()就是把传入的对象转换为键值对。

最后在vue里用axios的时候,针对post请求的问题可以做一个全局的设置,避免每个请求都要设置一遍太麻烦

免责声明:文章转载自《终于明白了vue使用axios发送post请求时的坑及解决原理》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇linux磁盘管理状态机在马蜂窝机票订单交易系统中的应用与优化实践下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装,以及前端Element界面的整个调用过程进行一个完整的介绍。 我们前面介绍了Vue+Element前端的接口是调用后端的ABP框架发布的API接口服务,API...

前端-Vue基础1

Vue核心思想:只要改变数据,页面就会发生改变 1.引入vue 1.下载vue.js 2.在script标签的src属性中,引入vue.js <script src="js/vue.js"></script> 2.vue实例 el:vue接管的div元素,注:只能接管一个div,所有需要vue处理的,必须写在这个div中 data...

Vue子组件和父组件、子组件调用父组件的方法、父组件调用子组件方法、子组件与父组件间的传值

 Vue子组件和父组件、子组件调用父组件的方法、子组件与父组件间的传值: 第一: 子组件和父组件定义:     父组件:DeptMgrTop.vue     子组件:DeptMgrBody.vue(<top-body></top-body>)和DeptMgrBodyUser.vue(<top-bodyUser><...

单项目实现vendor分离编译,增加编译效率(vue-cli)

1、在build文件夹下添加文件:webpack.dll.config.js const path = require('path') const webpack = require('webpack') const package = require('../package.json') const AssetsPlugin = require('ass...

ant design vue级联选择懒加载省市区三级数据

项目中原先是展示的一级数据,后面根据需求改成精确到县的。 使用Cascader级联选择,后台返回的是获取省份的字典接口,根据codeValue一级级查询进行动态加载。   <a-form-model-item prop="projectArea" ref...

windows手动安装npm教程 即vue

1、在使用之前,先类掌握3个东西,明白它们是用来干什么的: npm: nodejs 下的包管理器。 webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备,比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要np...