webpack反向代理，接口超时取不到数据

1、问题现象

项目参考vue-element-template，使用vue-cli@4.4.4，开发环境用dev-server配置反向代理。

使用axios发起请求，‘Content-Type’为 application/x-www-form-urlencoded，接口接收不到传过去的数据。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/manager': {
        target: 'http://172.16.36.67:30082',
        changeOrigin: true
      }
    },
  
    before: require('./mock/mock-server.js')
  }
}

2、排查过程

1、使用Apifox快速调试直接请求反向代理后的地址，超时60秒才响应。排除http库axios请求的问题。

2、使用Apifox快速调试请求源Api地址正常。但发送相同的内容，请求头的content-length和在页面反向代理请求的不一样。

直接请求源地址content-length为46。

搭建一个简单的node服务，webpack-dev-server代理这个地址，检查web请求发送的数据，发现content-length为44。

3、初步判断为dev-server反向代理问题，遂尝试更换vue-cli版本，但问题一致，暂时排除dev-server的问题。

4、然后围绕content-length长度不一致问题排查哪里修改了请求体。

5、终于发现dev-server的配置里面有这么一行：before: require('./mock/mock-server.js')

mock/mock-server.js

const bodyParser = require('body-parser')

module.exports = app => {
  // parse app.body
  // https://expressjs.com/en/4x/api.html#req.body
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({
    extended: true
  }))
}

就是mock这里修改了请求体，导致了这个问题，由于项目的mock功能迁移到Apifox了，所以把before配置去掉就正常了

3、总结

1、可以使用排除法定位问题

2、项目中不用的功能，及时分析整理，有些看着只是冗余，但可能是个隐患