Vue axios发送请求中的一些坑
需求是这样子的:前端输入手机号 和 已经加载的图片验证码 ,如果正确 后端返回true,失败返回flase第一反应 这有什么难的:Vue.prototype.http = axiosthis.http({method: "post",url: '********',data:{...
需求是这样子的:前端输入手机号 和 已经加载的图片验证码 ,如果正确 后端返回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 再来一次 没有报错 看一下验证码 哇塞 成功!!终于。。。
更多推荐
所有评论(0)