VUE 请求代理地址localhost报错[HPM] Error occurred while trying to proxy request

前言

问题排查

网络联通性测试

[ping localhost](#ping localhost)

[ping 127.0.0.1](#ping 127.0.0.1)

问题结论

解决方案

[强制使用 IPv4](#强制使用 IPv4)

[修改localhost 为127.0.0.1](#修改localhost 为127.0.0.1)

[localhost 与 127.0.0.1 的区别](#localhost 与 127.0.0.1 的区别)

前言

今天前后端联调测试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客户端和服务端网络握手没有成功。正常来说localhost作为回环地址：允许计算机与自身进行网络通信，而不需要经过物理网络接口（如网卡）。所以可以在本地运行一个 Web 服务器，然后通过客户端访问 http://localhost:8080 服务。

网络联通性测试

ping localhost

通过ping localhost命令进行测试发现返回 ::1 (IPv6)

ping 127.0.0.1

通过 ping 127.0.0.1命令进行测试发现返回了127.0.0.1

所以通过上面测试发现 localhost 是一个特殊的主机名，它指向当前计算机本身，对应的 IP 地址是 127.0.0.1 （IPv4）或 ::1（IPv6）。

问题结论

vue请求的后端服务只监听了 IPv4，而vue发送localhost的地址请求被解析为ipv6的回环地址，所以请求不通。即 localhost -> 连接到 ::1:8080 -> 连接失败，而使用 127.0.0.1 -> 连接到 127.0.0.1:8080 -> 连接成功。

解决方案

强制使用 IPv4

在 hosts 文件中添加配置（需要管理员权限）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即可。

javascript 复制代码

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

localhost 与 127.0.0.1 的区别

对比项	localhost	127.0.0.1
本质	主机名（域名）	IPv4 地址
解析	需要 DNS 解析	直接指向本地
IPv6	可能解析为 ::1	固定 IPv4 地址
系统 hosts	可能被修改	固定不变
连接速度	稍慢（需解析）	直接连接