快捷導(dǎo)航

Vue請(qǐng)求代理地址localhost報(bào)錯(cuò)：[HPM] Error occurred while trying to proxy request的解決方案

更新時(shí)間：2026年02月05日 09:16:28 作者：super_lzb

這篇文章主要介紹了在前后端聯(lián)調(diào)測(cè)試Vue時(shí)遇到的請(qǐng)求超時(shí)問(wèn)題,通過(guò)排查發(fā)現(xiàn)是由于Vue請(qǐng)求的后端服務(wù)只監(jiān)聽(tīng)了IPv4,而Vue發(fā)送的localhost地址請(qǐng)求被解析為IPv6的回環(huán)地址導(dǎo)致的,通過(guò)修改hosts文件將localhost改為127.0.0.1,并將Vue代理請(qǐng)求更換成127.0.0.1,解決了問(wèn)題

前言

今天前后端聯(lián)調(diào)測(cè)試vue報(bào)錯(cuò)，[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),意思是這個(gè)請(qǐng)求uri /getSystemTime 請(qǐng)求到服務(wù)地址 http://localhost:8080 超時(shí)報(bào)錯(cuò)了，但是后端服務(wù)是正常啟動(dòng)的，

問(wèn)題排查

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

網(wǎng)絡(luò)聯(lián)通性測(cè)試

ping localhost

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

ping 127.0.0.1

通過(guò) ping 127.0.0.1命令進(jìn)行測(cè)試發(fā)現(xiàn)返回了127.0.0.1

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

問(wèn)題結(jié)論

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

解決方案

強(qiáng)制使用 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代理請(qǐng)求更換成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ū)別

對(duì)比項(xiàng)	localhost	127.0.0.1
本質(zhì)	主機(jī)名（域名）	IPv4 地址
解析	需要 DNS 解析	直接指向本地
IPv6	可能解析為 ::1	固定 IPv4 地址
系統(tǒng) hosts	可能被修改	固定不變
連接速度	稍慢（需解析）	直接連接

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

您可能感興趣的文章: