Angular CLI代理配置无法访问本地运行的Node.js服务该如何排查？

问题排查&解决步骤 #

优先修改代理配置（90%概率是路径匹配问题） #

如果你的Node.js服务实际接口路径是http://localhost:9001/saveClients（不带/api前缀），需要修改proxy.config.json增加路径重写规则，否则代理会把请求转发到http://localhost:9001/api/saveClients，和实际接口路径不匹配：

{
  "/api/*": {
    "target": "http://localhost:9001",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

如果你的Node.js接口本身就带/api前缀，即路径为http://localhost:9001/api/saveClients，则不需要加pathRewrite配置，仅补充changeOrigin: true即可。

逐项检查以下配置是否正确 #

• 必须用npm start命令启动Angular项目，不能直接用ng serve，否则代理配置不会加载
• 先直接用Postman/curl调用Node.js接口http://localhost:9001/[你的接口路径]，确认后端服务本身运行正常，接口可以正常返回
• 检查根模块AppModule的imports数组中是否已经导入HttpClientModule，未导入的话HttpClient不会生效，请求根本不会发出
• 启动项目后查看终端的debug日志，会打印类似[HPM] POST /api/saveClients -> http://localhost:9001的代理转发记录，确认转发的目标地址、路径是否和预期一致
• 若使用Windows系统，可尝试将target的值改为http://127.0.0.1:9001，避免localhost解析异常导致的代理失败

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