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

Question

在vue-cli里面使用http-proxy-middleware post的数据没有传递到服务器，服务器一直返回空数据
在config/index.js

proxyTable: {
            '/api': {
                target: 'http://192.168.1.86:9999/web',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
        },

配置了全局axios

   import axios from 'axios';
   Vue.prototype.$http = axios;  

请求接口

let url = 'api/接口'
this.$http({
            url: url,
            method: 'post',
            data: {
                mobile: parseInt(this.phonenum),
                type: 1
            },
        }).then(res => {})
          .catch(err=>{})

能搞请求后台成功后，但是后台却没有接到数据

Answer 1

初始化配置axios，create一个新的service，设置头部，然后转换一下数据 就OK啦

import axios from 'axios';

import Qs from 'qs';
// 创建axios实例
const service = axios.create({
    timeout: 5000, // 请求的超时时间
    //设置默认请求头，使post请求发送的是formdata格式数据
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    withCredentials: true, // 允许携带cookie
    transformRequest: [function(data) {
        let newData = ''
        for (let k in data) {
            newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
        }
        return newData
    }],
    paramsSerializer: function(params) {
        return Qs.stringify(params);
    }
})

export default service

Answer 2

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

Answer 3

1.我的理解你说的意思是后台接收到了你这个请求，但是没有收到你data里的数据，那可能是因为你的data的格式不对，用

data: JSON.stringfy({
                mobile: parseInt(this.phonenum),
                type: 1
            })

试试

Answer 4

开到控制台接口状态码是200吗？看response有没有数据？