Mac端Chrome调试工具导致Angular代理失效，API请求路径错误求助

在Apple MacBook Pro上使用Google Chrome调试工具时，Angular项目出现网络请求失败问题。未开启调试器时代码运行正常，开启后API请求指向http://localhost:4200/api/quotes而非预期的http://localhost:3000，相同项目在Linux环境下运行完全正常。

核心业务代码 #

async getQuotes() {
const uriParams = new HttpParams().set('page', ++this.page);

await lastValueFrom(this.httpClient.get(`${environment.baseUrl}/api/quotes`, { params: uriParams}))
  .then (result => {
    this.message = `${JSON.stringify(result)}`;
  })
  .catch(() => {
    this.message = '*** Failed ***';
  })
}

代理配置文件proxy.conf.json #

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

• 检查Chrome调试器网络设置
  打开Chrome调试器「网络」面板，确保「禁用缓存」未勾选，同时检查「Throttling」设置，避免选择离线或异常网络模式。

• 重启服务与浏览器

  1. 停止当前Angular服务（Ctrl+C）
  2. 清除Angular缓存：执行ng cache clean
  3. 重新启动服务，确保指定代理配置：ng serve --proxy-config proxy.conf.json
  4. 完全关闭Chrome（含后台进程）后重新打开，再启动调试器测试。

• 调整代理规则匹配范围
  将/api/*改为/api/**以支持更深层级的路径匹配，修改后重启服务：

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

• 排查Mac系统代理
  打开「系统设置」→「网络」→ 当前网络「高级」→「代理」，关闭所有手动设置的全局代理，避免与Angular代理冲突。

• 使用隐身模式排除干扰
  打开Chrome隐身窗口加载项目并开启调试器，排除浏览器扩展（如广告拦截、代理插件）的干扰。

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