Vue请求代理地址localhost报错：[HPM] Error occurred while trying to proxy request的解决方案

前言

今天前后端联调测试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 即可。

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

localhost 与 127.0.0.1 的区别

以上就是Vue请求代理地址localhost报错：[HPM] Error occurred while trying to proxy request的解决方案的详细内容，更多关于Vue localhost报错Error occurred的资料请关注脚本之家其它相关文章！