vue使用axios发送post请求时的坑及解决原理

vue使⽤axios发送post请求时的坑及解决原理
前⾔：在做项⽬的时候正好同事碰到了这个问题，问为什么⽤axios在发送请求的时候没有成功，请求不到数据，反⽽是报错了，下图就是报错请求本尊
vue⾥代码如下：
this.$http.post('/getMatterList.do',{"matterIds":"1,2,3"})
.then((res)=>{
console.log(res);
})
乍⼀看，没⽑病啊，请求不就是这么发的吗，axios官⽅⽂档都这么⽰范的呢，还能有错？我们再来仔细看下浏览器⾥发出去的请求
有没有发现什么蹊跷，传送参数的形式不是我们熟悉的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)
})
改完之后再来看下，妥妥的了
问题是解决了，但是为什么呢？查阅⼀番资料之后，我⼜回来啦
HTTP请求中的get请求和post请求参数的存放位置是不⼀样的，get请求的参数以键值对的⽅式跟在url后⾯的，⽽post请求的参数是以键值对的⽅式在请求体⾥的
get请求
post请求
为何要设置请求头⾥的'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请求的问题可以做⼀个全局的设置，避免每个请求都要设置⼀遍太⿇烦。