需求是这样子的:前端输入手机号 和 已经加载的图片验证码 ,如果正确 后端返回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 再来一次 没有报错 看一下验证码 哇塞 成功!!终于。。。


感谢这些文章的参考:
参考一
参考二

Logo

前往低代码交流专区

更多推荐