VS Code+Firefox调试Angular时代理请求失败求助

核心错误分析 #

ECONNREFUSED 说明Angular代理服务器无法连接到后端服务 http://localhost:55278，按以下步骤逐一排查：

1. 确认后端服务正常运行 #

• 直接在浏览器访问 http://localhost:55278/api/auth/user/，如果无法打开或返回响应：
  • 检查VS2022的后端服务是否启动，或启动时是否报错（查看VS调试输出窗口）；
  • 确认后端实际监听端口是否为55278（VS有时会随机分配端口，需从VS输出日志中获取真实端口，再更新proxy.conf.json的target值）。

2. 确保Angular代理配置生效 #

• 启动Angular时，控制台必须输出代理初始化日志：
  执行 ng serve --open --proxy-config proxy.conf.json 后，应看到类似 [HPM] Proxy created: /api -> http://localhost:55278 的内容，说明代理加载成功。
• 若未看到该日志：
  • 检查proxy.conf.json是否在项目根目录；
  • 确认启动命令中的配置文件名拼写正确（比如是否误写为proxy.config.json）。

3. 修正VS Code的launch.json配置 #

你的配置存在几个关键问题：

（1）修复Firefox路径与临时目录

• Windows系统下路径需转义反斜杠，修改firefoxExecutable：

  "firefoxExecutable": "C:\\Program Files\\Mozilla Firefox\\firefox.exe"
  

• tmpDir替换为实际存在且有写入权限的本地文件夹，例如：

  "tmpDir": "C:\\temp\\firefox-debug"
  

（2）修正Attach配置的路径映射

pathMappings中URL与本地路径不匹配，会导致断点无法命中，调整为对应实际代码路径：

{
  "name": "Attach",
  "type": "firefox",
  "request": "attach",
  "pathMappings": [
      {
          "url": "webpack:///src/app/pages/client/home",
          "path": "${workspaceFolder}/src/app/pages/client/home"
      },
      {
          "url": "webpack:///src/main.ts",
          "path": "${workspaceFolder}/src/main.ts"
      }
  ]
}

（3）禁用Launch index.html配置

该配置是直接打开本地静态文件，不会启动Angular开发服务器与代理，必然无法连接后端。

4. 正确调试流程 #

1. 先启动VS2022后端服务，确认端口与接口可正常访问；
2. 执行 ng serve --open --proxy-config proxy.conf.json 启动Angular开发服务器；
3. 选择VS Code中的Attach配置点击启动，或选择Launch localhost直接启动Firefox访问http://localhost:4200。

内容的提问来源于stack exchange，提问作者user18928007