Vue axios发送请求中的一些坑 |
您所在的位置：网站首页 › soul太坑 › Vue axios发送请求中的一些坑 |
Vue axios发送请求中的一些坑
|
需求是这样子的：前端输入手机号 和 已经加载的图片验证码 ，如果正确 后端返回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我。 在组件中 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 好 设置完了 再来一次 感谢这些文章的参考： 参考一 参考二 |
可是仔细看一下。突然就明白了，后端用的居然是 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
凉凉，苍天饶过谁！！ 开始Google之旅，终于看到了一个有用的信息 【本文地址】
今日新闻 |
推荐新闻 |