vue-element-template devServer proxy 兼容真实数据和mock数据遇到的问题

vue-element-template 工程在开发过程中，后端人员已经完成了部分接口，这时，需要将这部分接口切换至后端真实接口，而未开发完毕的接口，还使用 mock 数据

devServer 兼容配置

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),
    proxy: {
      '/api/ibothub/v1/mgr': {
        target: 'http://10.231.102.67:10083'
      },
      '/api/ibothub/v1/notice': {
        target: 'http://10.231.102.67:10084'
      },
      '/api/mock/block': {
        target: 'http://localhost:9528'
      }
    }
  },

前两个路由，devServer 会转到相应的后端服务，第三个路由访问mock数据

431 Request Header Fields Too Large

使用 mock-server.js 时，会抛出 431 这个异常，解决方案如下：
找到工程 node_modules\.bin 路径下的 webpack-dev-server.cmd 和 vue-cli-service.cmd 两个文件，大约在第12行，将

"%_prog%"  "%dp0%\..\@vue\cli-service\bin\vue-cli-service.js" %*

修改为

"%_prog%"  "--max-http-header-size=1000000" "%dp0%\..\@vue\cli-service\bin\vue-cli-service.js" %*

修改后，重启前端服务，接口访问正常

I/O error while reading input message

swagger 访问正常，前端请求后F12一直处于 pendding 状态，一段时间后，后端报错截图如下

针对这个报错，网上有很多解决方案，但思路都是针对后端服务Filter来处理，开始我们的排查方向有误，也从后端出发，耽误了一段时间，后面采用排查法，定位到是 mock-server 的问题。找到文件 mock/mock-server.js，修改方案如下：

1. 修改第15行

for (const mock of mocksForServer) {
    // post请求后端无响应调整
    app[mock.type](mock.url, bodyParser.json(), bodyParser.urlencoded({
      extended: true
    }), mock.response)
    // app[mock.type](mock.url, mock.response)
    mockLastIndex = app._router.stack.length
  }

2. 修改第50行

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
  // }))

  const mockRoutes = registerRoutes(app)
  var mockRoutesLength = mockRoutes.mockRoutesLength

参考资料

vue项目本地启动服务携带token访问接口报431

vue项目中使用axios 请求，报431错误（Request Header Fields Too Large）错误

POSTMAN能请求到后端接口,.HTTPMESSAGENOTREADABLEEXCEPTION: I/O ERROR WHILE READING INPUT MESSAGE； NESTED EXCE