本地開發使用vue框架,前端請求超時為2min,報錯ERR_EMPTY_RESPONSE

語言: CN / TW / HK

背景

昨天有人找我看了個問題,開發在本地寫了一個功能在除錯,功能是上傳一個檔案到後端處理,處理耗時大概為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的

js proxyTable: { '/api': { target: '介面代理地址', timeout: 3*60*1000, //設定超時 changeOrigin: true }, },

2、如果你是devServer的

js 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)