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

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

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

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

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

(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
这时，看到了这篇文章《一个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
可以看到原始日志，connect ECONNREFUSED 127.0.0.1:8001，果然是因为 127.0.0.1 无法访问的缘故。
 
当前问题的解决办法：
 
(1) 在服务端后台解决跨域问题（上线后接口配置）
 
比如 使用 Homestead + Vagrant 配置后端开发环境，在 Nginx 里使用 add_header 配置 Access-Control-Allow-Origin 策略。
 
(2) 使用jsonp解决跨域问题。（这个在以前用jQuery开发时比较常用）
 
(3) 开发继续使用 PHP 内置web服务，前端继续使用代理自己解决跨域。
 
重启PHP后台接口，使用 ip：
 
$ php -S localhost:8001 -t ./public
$ php -S 127.0.0.1:8001 -t ./public
http://blog.epoos.com/2018/05/21/proxy-error/
 https://angular.io/guide/build
 https://webpack.js.org/configuration/dev-server/#devserverproxy
                                        展开阅读全文 
                                                    ARCHIVED - MRF7S19080HR3, MRF7S19080HSR3 1930-1990 MHz, 24 W Avg., 28 V Single W-CDMA Lateral N-C...
                                                    浅析利用AI智能识别与视频监控技术打造智慧水产养殖监管系统
                                                    Oracle数据库的默认隔离级别是？
                                                    ARCHIVED - MHT2000NR1, MHT2000GNR1 2450 MHz, 25 W CW, 28 V Industrial Heating, Rugged RF LDMOS In...
                                                     智慧电力方案：安防监控/视频分析AI识别技术在电力领域中的应用
                                                    汇聚数据库创新力量，共赢行业数智未来 | openGauss Meetup（西安站）精彩回顾！
                                                    MRF18085ALR3, MRF18085ALSR3 1805-1880 MHz, 85 W, 26 V, GSM/GSM EDGE  Lateral N-Channel RF Power M...
                                                    头部大模型公司进京赶考，向量数据库成为应考神器
                                                    ARCHIVED - MRF8P26080HR3, MRF8P26080HSR3 2500-2700 MHz, 14 W Avg., 28 V W-CDMA, LTE Lateral N-Cha...
                                                    数字先锋|少跑多办！天翼云助力安徽政务跑出便民利企“加速度”
                                                    接入 NVIDIA A100、吞吐量提高 10 倍！Milvus GPU 版本使用指南
                                                    已上新！DolphinDB V2.00.10 & V1.30.22 有哪些新特性？
                                                    场景探索｜文化数字化、证书可信任，区块链打开多元数字营销新场景
                                                    smartbi token回调获取登录凭证漏洞（二）
                                                    高级SQL分析函数-窗口函数
                                                    Go的任务调度单元与并发编程
                                                    MRF18030BLR3, MRF18030BLSR3, 1930-1990 MHz, 30 W, 26 V GSM/GSM EDGE Lateral N-Channel RF Power MO...
                                                    龙蜥社区第 17 次运营委员会会议顺利召开
                                                    什么是算力网络
                                                    关于假冒我司关联公司进行欺诈活动的严正声明！
                                                    ARCHIVED - MRFE6S9125NR1, MRFE6S9125NBR1 880 MHz, 27 W Avg., 28 V Single N-CDMA, GSM EDGE Lateral...
                                                    深度解读 KaiwuDB 的排序操作
                                                    TiDB 7.1.0 LTS 特性解读丨关于资源管控 (Resource Control) 应该知道的 6 件事
                                                    一个因 SSL 配置导致的 MySQL 复制异常报错
                                                    从云计算到天空计算（二）
                                                    Spring注解导入：@Import使用及原理详解
                                                    Smart Card reader application with TDA8029 Mask 06 and Mask 07
                                                    MW4IC2230MBR1, MW4IC2230GMBR1 2110-2170 MHz, 30 W, 28 V Single W-CDMA RF LDMOS Wideband Integrate...
                                                    龙蜥浪潮信息携手同走开源特色路，共建云时代数智计算基石 | OCP China Day 2023 回顾
                                                    消除企业信息孤岛的低代码开发平台
                                                    【深圳】九月再聚首，EdgeX + OpenVINO™ 开发者生态大会与你共探技术先锋
                                                    ARCHIVED - MD7IC2251NR1, MD7IC2251GNR1 2110-2170 MHz, 12 W Avg., 28 V Single W-CDMA RF LDMOS Wide...
                                                    CDN在互联网直播中的运用与性能优化
                                                    从密码重置打到Getshell和其它漏洞打包
                                                    Python + HDF5 因子计算与 DolphinDB 一体化因子计算方案对比
                                                    Handling of the OSRAM OSTAR® Projection Cube
                                                    冠军！天翼云在国际AI顶会大模型挑战赛中拔得头筹！
                                                    9月24日上海｜邀您来首届MatrixOne Meetup，聊聊AIGC时代数据平台发展态势
                                                    iconfont渐变色实现方案总结
                                                    TDA8024 Smart Card Interface
                                                    TRUNCATE 语句到底因何而慢？
                                                    开发者实战 | 在AI爱克斯开发板上用OpenVINO™加速YOLOv8-seg实例分割模型
                                                    基于 Llama2 和 OpenVINO™ 打造聊天机器人
                                                    当一个程序员决定穿上粉裤子
                                                    开发者实战 | 在英特尔® 开发者套件上使用 OpenVINOSharp 部署 YOLOv8 模型
                                                    plastic thermal enhanced thin shrink small outline package; 24 leads; body width 4.4 mm; lead pit...
                                                    PyTorch创始人：开源成功的方法论
                                                    OpenAI首席科学家：通向无监督学习之路
                                                    明天直播，英特尔第四代至强可扩展处理器 DLB 加速器的云上探索 | 第 82 期
                                                    MRFE6S9135HR3, MRFE6S9135HSR3 940 MHz, 39 W Avg., 28 V Single W-CDMA Lateral N-Channel RF Power M...
                                                    plastic thermal enhanced thin shrink small outline package; 56 leads; body width 6.1 mm; exposed ...
                                                    【我和openGauss的故事】kettle连接openGauss 5.0.0 数据库
                                                    Cocos 助力博世中国，共同探索智能座舱技术解决方案
                                                    Tongsuo 8.4.0-pre2 发布
                                                    【我和openGauss的故事】openGauss 5.0.0企业版x86单机安装
                                                    从student表中查询学生姓名、年龄和成绩，下面SQL语句正确的是？
                                                    mysqldump 搭建复制报错，竟然是因为这个！
                                                    云原生周刊：KubeCon China 2023 详细议程公布 | 2023.8.7
                                                    全球研究显示：首席技术官对于公司实现净零目标至关重要
                                                    多云时代！天翼云TeleDB以科技创新释放数据价值
                                                    TSINGSEE青犀视频汇聚融合平台EasyCVR的中性化版本如何配置？ 
                                                    一文读懂苹果的差分隐私技术原理
                                                    如何使用 Blazor 框架在前端浏览器中导入和导出 Excel
                                                    openGauss-graph 0.2.0版本正式上线
                                                    libpq SDK 发送 SQL 和解析结果
                                                    一探究竟！天翼云2023MWC展区“亮”了！
                                                    低代码应用开发平台 高效构建业务系统
                                                    EasyCVR播放设备录像出现部分视频不能播放的原因排查与解决 
                                                    DatenLord前沿技术分享 NO.35
                                                    向量检索在大模型应用场景的技术和实践
                                                    如何快速实现多人协同编辑？
                                                    倒计时6天 l 机遇与挑战-生成式AI的发展趋势和落地应用
                                                    利用远程调试获取Chromium内核浏览器Cookie
                                                    推荐收藏！年度Top20开源许可证风险等级
                                                    OpenHarmony 4.0 Beta1发布，邀您体验
                                                    高性能存储SIG月度动态：io_uring支持nvme直通，DSMS完成开发测试
                                                    Single-chip 16-bit/32-bit micro; 512 kB flash with ISP/IAP, Ethernet, USB 2.0 device/host/OTG, CA...
                                                    行于“云”上，“翼”路顺畅！
                                                    拥抱AIGC，他们有话说——百度李双龙：AIGC将赋能多个场域并惠及千行百业
                                                    深入学习 Linux 操作系统的存储 IO 堆栈
                            看了 wangEditor 的公告，如鲠在喉。去年七月，我在一篇《关于剔除 layedit 组件》的公告中，还推荐了几款 editor 组件用于替代，其中就包括了 wangEditor, 转眼之间，仿若时空交错，不免有些感慨。 在国内由个人发起的开源项目，似乎都很难跳出相同的宿命，不断有人走进这个赛道，但能抵达终点并完成突破的却屈指可数。Layui 曾经同样倒在了赛道，2021 年宣布关站之前，Layui 的百度指数还一度领先 Bootstrap, 如此一个拥有广泛用户群体的 UI 库，本该迎来新的突破，却在疾跑中戛然止步，至今令人迷惑。人们看到的，是一篇充满悲情色彩的公告，而公告的背后，是创作者在面对内外交织的困境中不得已做出的举措，当我们没有足够的力量冲破眼前的障碍，除了停下来避开它，还有别的更优选择么。你很难想象除此之外还有多少历史包袱… 譬如，也是由于种种原因，当初 Layui 在 Github 和 Gitee 待处理的 Issue 数量，不下于 2000，各种议题参次不齐，我差不多花了半年时间去逐一审阅，多少个日夜消耗，多少次自我情绪的对抗… 就不多提了。 尽管这两年来，Layui 的受众者已呈断崖式流失，但正因为小众，反而如释重负，甚至让我重新找回了一些开源的纯粹。 共勉 🙂
                            本人原创作者，在此解释声明一二： 1. 我的父母还没有无耻到做这种无耻的事情，我也对我的能力有信心，目前也不需要这些偷鸡摸狗的见不得光的东西来造假，请各位不要以小人之心度君子之腹。 2. 我今年初三，项目是从初一开始做的，各位不相信的欢迎上github看提交记录，可以看一下初版和现在的区别，UI和js都有不小更改。 3. 团队组成：今年一位初三，一位初一，一位5+4制的初一。更新记录中明确记录了哪些功能是哪位所开发的。 4. 我在github上，bilibili上没有受到过任何一个人的质疑，我对中国的网络环境表示蔑视。 5. 本项目的初中只是为了兴趣，没有想到火了起来。 我不理解你们是如何通过代码读出作者年龄的？难道是语文考试要加入代码阅读赏析的题目了吗？真心觉得很厉害。 6. 不愿与某些人同流，也无众位深厚阅历经验，只望能得清白之名。感谢大家让我懂得了何乃人情世故，孰谓世态炎凉，世俗红尘。你们给我的人生上了重要的一课。人间哪有什么真善美啊，呵。社会的病胎罢了。
                            专门登录写个评论，为了信创而信创没有任何意义。 如果开源的spring被认为是非自主可控不安全的，那请问Linux和Java属于自主可控吗？那些大数据和人工智能的组件属于自助可控吗？Docker和K8s属于自主可控吗？ 真要完全安全自主的话，国内的计算机行业应该从汇编开始发展。 师夷长技以制夷，我支持自主研发、自主可控的信创策略，但应该是更底层的芯片、操作系统、虚拟机、容器化这些基础组件的研发。像中间件、应用框架这些东西，就算一夜之间所有github的代码全部消失了，集合几家大厂的能力，开发出来又能花多少时间呢？况且现在大厂本身就有很多自研的中间件和框架。 本身东西就不复杂，现在spring、redis这些东西流行只是因为它们诞生的早生态好罢了，而不是难度。为此单独再搞一套轮子我觉得大可不必。