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

Question

在vue-cli里面使用http-proxy-middleware post的数据没有传递到服务器，服务器一直返回空数据 在config/index.jsproxyTable: {            '/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有没有数据？