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

Question

在vue-cli里面使用http-proxy-middlewarepost的数据没有传递到服务器，服务器一直返回空数据在config/index.js
proxyTable:{
'/api':{
target:'http://192.168.1.86:9999/web',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
},
配置了全局axios
importaxiosfrom'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,//允许携带cookietransformRequest:[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，可有直接转换成正确的格式。