Angular本地中转报错:[HPM] Error occurred while trying to proxy request

最新推荐文章于 2024-09-10 14:08:00 发布

Web后端技术

最新推荐文章于 2024-09-10 14:08:00 发布

阅读量6.1k

点赞数 1

分类专栏： Angular 文章标签：前端 angular

本文链接：https://blog.youkuaiyun.com/cnwyt/article/details/115090180

版权

Angular 专栏收录该内容

14 篇文章

订阅专栏

在Angular开发中，遇到本地代理设置突然失效，导致接口请求出现504错误。排查包括检查proxy.conf.json配置、后端服务状态、接口URL等，最终发现是由于localhost无法访问127.0.0.1:8001导致。解决方案是将后端服务监听地址从localhost改为127.0.0.1。问题的根源在于localhost和127.0.0.1在某些情况下可能不等价。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular本地中转报错:[HPM] Error occurred while trying to proxy request

代理配置

在前端开发中了，为了解决浏览器跨域问题，一般都会使用 webpack 的 devServer.proxy 功能，来中转接口。

根据 Angular 的文档，只需要四步即可使用代理。

(1) 在 src/ 目录下创建 proxy.conf.json 配置文件.

(2) 在 proxy.conf.json 配置文件中写上中转规则:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

(3) 在 angualr.json 配置文件中，加上 proxyConfig 的配置:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

(3) 使用 ng serve 重新启动项目.

这样在Angular项目中访问 http://localhost:4200/api 就会自动中转到 http://localhost:3000/api 接口了。

莫名其妙的问题

就这样，在开发环境中一直可以正常运行，上周五重启电脑，本周一再运行居然报错了。

浏览器接口请求的报错信息如下:

Error occured while trying to proxy to: localhost:4201/adminapi/login?AdminLogin

在终端中报错如下：

[HPM] POST /adminapi/login?AdminLogin -> http://localhost:8001/
[HPM] Error occurred while trying to proxy request /adminapi/login?AdminLogin 
 from localhost:4201 to http://localhost:8001/ 
  (ECONNREFUSED) 
  (https://nodejs.org/api/errors.html#errors_common_system_errors)

在HTTP拦截器中打印的 HttpErrorResponse 错误如下：

HttpErrorResponse {
	headers: HttpHeaders, 
	status: 504, 
	statusText: "Gateway Timeout", 
	url: "http://localhost:4201/adminapi/login", 
	ok: false
}

看一下项目的配置吧。

前端使用 Angular 11，后端使用 PHP lumen 8+，前端后端同时开发。

为了方便开发，直接使用了 PHP 内置的web服务器，没有使用 Vagrant + Homestead 环境。

$ php -S localhost:8001 -t ./public
[Mon Mar 22 17:31:34 2021] PHP 8.0.3 
  Development Server (http://localhost:8001) 
  started

接口配置如下：

// src/environments/environment.ts
export const environment = {
  production: false,
  // 当前ng启动的地址，使用proxy.conf.json配置中转到配置里的地址
  apiHost: 'http://localhost:4201/api', 
  adminApi: 'http://localhost:4201/adminapi', 
};

中转文件 src/proxy.conf.json 配置如下:

{
  "/adminapi/*": {
    "target": "http://localhost:8001/",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  },
  "/api/*": {
    "target": "http://localhost:8001/",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

网上的解决方法

(1) 配置文件 proxy.conf.json 未指定 http 或 https：【排除，不是该问题】

# 未加 http,报错
target: 'localhost:8081',  
# 正常
target: 'http://localhost:8081',

(2) 后端接口没启动：【排除，不是该问题】

可以看到接口是正常的。直接在浏览器复制curl请求，在终端执行请求也是正常的。

$ curl -XPOST localhost:8001
{"Status":401,"Msg":"Unauthorized.","Data":"","metadata":{}}%

(3) proxy 配置规则不正确。【排除，不是该问题】

查看 webpack 的 devServer.proxy 配置，也未见异常。

而且，proxy.conf.json 配置文件并未改动，之前都是正常的。

(4) 删掉 node_module 重新下载依赖包。重装了 nodejs (v15.6)。都不行。

(5) 有网友指出要将 localhost 改成 ip 访问。

✔ Compiled successfully.

[HPM] POST /adminapi/login?AdminLogin -> http://127.0.0.1:8001/
[HPM] Error occurred while trying to proxy request /adminapi/login 
from localhost:4201 to http://127.0.0.1:8001/ 
 (ECONNREFUSED) 
 (https://nodejs.org/api/errors.html#errors_common_system_errors)

也是不行。继续报错。

其实这里就有问题了，潜意识里，一直认为 localhost 就是等于 127.0.0.1 的。

$ curl -XPOST 127.0.0.1:8001
curl: (7) Failed to connect to 127.0.0.1 port 8001: Connection refused

不知为何，这里居然是访问不了的。但是 ping 查看 localhost 也是访问的 127.0.0.1 的。

$ ping localhost
PING localhost (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.061 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.255 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.181 ms
^C

这时，看到了这篇文章《一个localhost引发的血案》。

webpack 的 devServer.proxy 配置，其实是用的 http-proxy-middleware 包。

在 node_modules 找到这个包，找个跑出错误地方查看。

找到 logError 函数，可以达到

// node_modules/http-proxy-middleware/lib/index.js

function logError(err, req, res) {
var hostname =
  (req.headers && req.headers.host) || (req.hostname || req.host)
var target = proxyOptions.target.host || proxyOptions.target
var errorMessage =
  '[HPM] Error occurred while trying to proxy request %s from %s to %s (%s) (%s)'
var errReference =
  'https://nodejs.org/api/errors.html#errors_common_system_errors'
 // <------- 在这里打印日志 
 logger.error("==========> 打印日志： ")
 logger.error(err)

logger.error(
  errorMessage,
  req.url,
  hostname,
  target,
  err.code || err,
  errReference
)
}

在控制台可以看到输出的错误日志。

[HPM] Error occurred while trying to proxy request /adminapi 
  from localhost:4201 to http://127.0.0.1:8001/ 
  (ECONNREFUSED) 
  (https://nodejs.org/api/errors.html#errors_common_system_errors)
[HPM] POST /adminapi?AdminGetTransactionList -> http://127.0.0.1:8001/
==========> 打印日志：
Error: connect ECONNREFUSED 127.0.0.1:8001
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1138:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 8001
}