前言

今天前后端聯(lián)調(diào)測試vue報錯，[HPM] Error occurred while trying to proxy request /getSystemTime from 127.0.0.1 to http://localhost:8080/api/ (ETIMEDOUT) (https://nodejs.org/api/errors.html#errors_common_system_errors),意思是這個請求uri  /getSystemTime 請求到服務地址 http://localhost:8080 超時報錯了，但是后端服務是正常啟動的，

問題排查

這個問題在于 (ETIMEDOUT)也就是請求超時，vue客戶端和服務端網(wǎng)絡握手沒有成功。正常來說localhost作為回環(huán)地址：允許計算機與自身進行網(wǎng)絡通信，而不需要經(jīng)過物理網(wǎng)絡接口（如網(wǎng)卡）。所以可以在本地運行一個 Web 服務器，然后通過客戶端訪問 http://localhost:8080 服務。

網(wǎng)絡聯(lián)通性測試

ping localhost

通過ping localhost命令進行測試發(fā)現(xiàn)返回 ::1 (IPv6)

ping 127.0.0.1

通過 ping 127.0.0.1命令進行測試發(fā)現(xiàn)返回了127.0.0.1

所以通過上面測試發(fā)現(xiàn) localhost 是一個特殊的主機名，它指向當前計算機本身，對應的 IP 地址是 127.0.0.1（IPv4）或 ::1（IPv6）。

問題結(jié)論

vue請求的后端服務只監(jiān)聽了 IPv4，而vue發(fā)送localhost的地址請求被解析為ipv6的回環(huán)地址，所以請求不通。即 localhost -> 連接到 ::1:8080 -> 連接失敗，而使用 127.0.0.1 -> 連接到 127.0.0.1:8080 -> 連接成功。

解決方案

強制使用 IPv4

在 hosts 文件中添加配置（需要管理員權(quán)限）Windows位置: C:\Windows\System32\drivers\etc\hosts，
Linux/Mac位置: /etc/hosts。

配置如下所示

127.0.0.1 localhost
::1 localhost  # 可以注釋掉這行

修改localhost為127.0.0.1

將vue代理請求更換成127.0.0.1 即可。

   proxyTable: {
      '/api': {
          //target: 'http://localhost:8080/api/',
          target: 'http://127.0.0.1:8080/api/',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
    },

localhost 與 127.0.0.1 的區(qū)別

以上就是Vue請求代理地址localhost報錯：[HPM] Error occurred while trying to proxy request的解決方案的詳細內(nèi)容，更多關(guān)于Vue localhost報錯Error occurred的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論