本地开发使用vue框架，前端请求超时为2min，报错ERR_EMPTY_RESPONSE

背景

昨天有人找我看了个问题，开发在本地写了一个功能在调试，功能是上传一个文件到后端处理，处理耗时大概为3-4分钟，处理后返回给前端。

用的框架是ruoyi——前端框架是vue、element-ui，后端框架是springCloudGateway、springBoot

这个框架在前端可以设置超时时间

这个超时设置在ruoyi的官方文档是这样做的

但是这个是一般请求，上传文件的请求不是这种类型，上传文件的请求是通过el-upload的方法去调用上传的，不管怎么样，这篇文章讲的重点不是这个

问题

我们通过修改请求的超时时间为3分钟，浏览器从前端触发请求，后端等待2.5分钟后会返回
但是在浏览器的开发者工具上，我们看到的还是2分钟(2min)就超时了。

寻找问题原因

界定范围

先界定这个2min超时是谁超时的

使用postman发起请求到Gateway，看是不是后端的网关有超时限制，postman发出的请求，经过2.5分钟后，获得返回结果，这个是正常的

说明这个2min超时是在前端发生的

但是我们已经把请求的超时时间设定为3分钟，为什么还是2分钟就超时的了呢？

寻找同例

这种时候我就去寻求度娘的帮助

发现有人遇到类似的问题

最后发现是在开发环境中，前端使用了代理proxy，而这个proxy默认超时2min

解决方法

在webpack的配置中设置代理的timeout解决
1、如果你是proxyTable的

proxyTable: {
  '/api': {
    target: '接口代理地址',
    timeout: 3*60*1000, //设置超时
    changeOrigin: true
   },
},

2、如果你是devServer的

devServer: {
    proxy: {
     '/admin/': {
        target: '接口代理地址', // 目标路径
        changeOrigin: true, // 是否跨域
        timeout: 3*60*1000, //设置超时
      }
    }
}

总结

排查这类问题的时候，我们先要界定问题发生的范围，搜索是否有其他人也遇到了同样的问题

如果恰好有，那么解决问题就很快了

---

如果你对本文章有建议或疑问，欢迎在下面进行留言，一起交流

我是Vapire，一个普通的全栈开发。

以开发的角度看问题，用开发的方式学知识。

参考

vue 的devServer 配置详解 - 掘金 (juejin.cn)

浏览器两分钟自动超时，如何修改chrome浏览器ajax请求的默认超时时间？ - 知乎 (zhihu.com)

解决vue中axios设置超时(超过5分钟)没反应的问题 - 编程宝库 (codebaoku.com)

javascript - ajax request timeout 2min - Stack Overflow)