vue的vue.config中proxy代理post请求ECONNRESET

环境

vue 2.6.11、vue/cli 4.4.0、Typescript 3.9.3

---

遇到的问题

在开发模式下，接口默认用mock进行请求。在匹配到api字符串开头的请求，则通过代理请求到真实接口http://106.xx.xxx.xxx:8080。
vue.config.js

// webpack-dev-server 相关配置
  devServer: {
    host: 'localhost',
    port: 3001,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://106.xx.xxx.xxx:8080',
        changeOrigin: true,
      }
    },
    before: require('./mock/mock-server.js')
  },

此时，get请求是可以通过的(错误是后台报的，正常错误)。

如果是post请求的话，会报node层面的错误ECONNRESET

注释掉代理的配置，通过正常的post请求去请求真实api，是能够正常成功的。

分析

在数据接收方面有问题。因为正常post是能够成功的，说明接口没问题。代理后get请求也能够成功，说明代理配置上是没有问题的。所以只有可能是代理后post的数据格式上有问题。

解决方案

参考 https://github.com/chimurai/http-proxy-middleware/issues/40

vue.config.js

  // webpack-dev-server 相关配置
  devServer: {
    host: 'localhost',
    port: 3001,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://106.xx.xxx.xxx:8088',
        changeOrigin: true,
        onProxyReq:function (proxyReq, req, res, options) {
          if (req.body) {
            let bodyData = JSON.stringify(req.body);
            // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
            proxyReq.setHeader('Content-Type','application/json');
            proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
            // stream the content
            proxyReq.write(bodyData);
          }
        }
      }
    },
    before: require('./mock/mock-server.js')
  },

代理的post请求成功，撒花~