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

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

2022年02月24日 阅读:37 字数:375 阅读时长:1 分钟

问题记录:项目使用vue-cli,开发环境用dev-server配置反向代理。使用axios发起请求,接口接收不到传过去的数据。

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请求的问题。

36987425da9776f1.png

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

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

ce8023fb9d125161.png

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

111e1d5d0dda446b.png

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、项目中不用的功能,及时分析整理,有些看着只是冗余,但可能是个隐患

推荐阅读

恰饭区

评论区 0

0/500

还没有评论,快来抢第一吧