在vue-cli里面使用http-proxy-middleware post的问题

Question

在vue-cli里面使用http-proxy-middlewarepost的数据没有传递到服务器，服务器一直返回空数据在config/index.jsproxyTable:{'/api':{target:'http://192.168.1.86:9999/web',changeOrigin:true,pathRewrite:{'^/api':''}},配置了全局axiosimportaxiosfrom'axios';Vue.prototype.$http=axios;请求接口leturl='api/接口'this.$http({url:url,method:'post',data:{mobile:parseInt(this.phonenum),type:1},}).then(res=>{}).catch(err=>{})能搞请求后台成功后，但是后台却没有接到数据

Answer 1

初始化配置axios，create一个新的service，设置头部，然后转换一下数据就OK啦
importaxiosfrom'axios';
importQsfrom'qs';
//创建axios实例
constservice=axios.create({
timeout:5000,//请求的超时时间
//设置默认请求头，使post请求发送的是formdata格式数据
headers:{
"Content-Type":"application/x-www-form-urlencoded"
},
withCredentials:true,//允许携带cookie
transformRequest:[function(data){
letnewData=''
for(letkindata){
newData+=encodeURIComponent(k)+'='+encodeURIComponent(data[k])+'&'
}
returnnewData
}],
paramsSerializer:function(params){
returnQs.stringify(params);
}
})
exportdefaultservice
                            

Answer 2

axios的传输数据的格式，和我们平时传输的数据格式不太一样。我上次也遇见了这个坑。前端在浏览器最常用的传输数据格式是FormData，但是我上次的项目使用axios的时候传输数据格式是RequestPayload，这就使得后端（PHP）收到的数据格式解析方法和平时不一样，但是这也不是后端的问题，是我们前端在传输的时候将格式转为常用的FormData格式就正确了。你可以看看这篇文章RequestPayloadVSFormData，然后对照你的控制台的network查看是不是这个问题，我的解决方式是采用的qs，你也可以npminstallqs，可有直接转换成正确的格式。