Vue axios发送请求中的一些坑 - liu0415111的博客 - CSDN博客

安宇雨 - 随手采集
2019-07-15 18:16:33
随手采集
0000-未整理-等待研究

需求是这样子的：前端输入手机号和已经加载的图片验证码，如果正确后端返回true，失败返回flase
第一反应这有什么难的：

Vue.prototype.http = axios
this.http({
           method: "post",
             url: '********',
             data:{
             phone:this.phone,
             valid:this.valid
             }
           }).then(res=>{
               console.log(res.data)
            }

写完就没管，没多久便开始联调，第一个问题 后端在postman 上测试没有问题，联调之后就凉凉？ 我也是一脸懵逼，看一下postman的测试结果。真的，他没有pian我。
这里写图片描述
可是仔细看一下。突然就明白了，后端用的居然是 x-www-form-urlencode格式，并不是日常的formdata,心里暗自一喜，想必就是数据格式的问题。马上去百度了一下这几种格式：
formdata
就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来说明文件类型；content-disposition，用来说明字段的一些信息；
由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。
x-www-from-urlencoded
application/x-www-from-urlencoded,会将表单内的数据转换为键值对，比如,name=java&age = 23
还有别的我就不一一例举了，网上一抓一大把。
而 axios post 请求头content-type默认是application/json，而我们需要的是application/x-www-form-urlencoded。
那怎么办？改嘛总结出来有两种方法：
1.使用URLSearchParams
在main.js中设置content-type

axios.defaults.headers.post['Content-Type] = 
'application/x-www-form-urlencoded

在组件中

var params = new URLSearchParams();
params.append('key1',value1);
params.append('key2'value2);
this.http({
    method:'post',
    url:'*****',
    data:params
}).then(res=>{
    console.log(res.data)
})

这样子就可以辣

2.使用qs
安装并引入qs

import qs from 'qs' 
Vue.prototype.$qs = qs

在组件中

let postData = this.$qs.stringify({
                phone: this.phone,
                valid: this.valid
              });
              this.http({
                method: "post",
                url: '*****',
                data:postData,
              }).then(res=>{
        console.log(res.data)
                })

就可以啦然后我们就可以看见我们的数据格式已经变成后端想要的那种了。

再测一下…..还是不行啊为什么苍天！！
后台提了一句可能你每次的sessionId不一样，你把cookie发过来，然后居然惊讶的发现axios默认请求是不会带上CooKie的。。。需要设置withCredentials：true 来解决，而且需要后端配合设置Access-Control-Allow-Credentials:true 好设置完了再来一次
这里写图片描述
凉凉，苍天饶过谁！！开始Google之旅，终于看到了一个有用的信息

原来是之前设置跨域的*跟这个有冲突，所以就把通配所有源改成了localhost:8080 再来一次没有报错看一下验证码哇塞成功！！终于。。。