Angular调用公共API出现CORS错误，代理配置无效如何解决？

核心错误原因 #

• 代理配置的匹配规则和实际请求路径不匹配，导致代理完全未生效，浏览器直接跨域请求目标API地址触发CORS拦截。
• 业务代码的请求地址存在语法错误、路径规则不符合代理触发条件，进一步导致代理规则没有被命中。

具体修复步骤 #

1. 修正proxy.conf.json配置
   原配置的匹配规则和路径重写逻辑冲突，直接替换为以下内容即可：

{
  "/api/*": {
    "target": "https://bio.torre.co",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

规则说明：仅匹配以/api开头的请求，直接转发到目标站点，不需要额外重写路径（目标API本身路径就包含/api前缀）。

2. 修正ResumeService请求代码
   补全语法错误，调整请求路径为/开头的绝对路径才能触发代理：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ResumeService {
     
  constructor(private http: HttpClient) { }

  getUserData(id: string): Observable<any> {
    // 路径以/api开头触发代理，补全缺失的前引号
    return this.http.get<any>("/api/bios/ricovar96?s=fMoC3WTE0B");
  }
}

3. 重启开发服务
   重新执行npm start启动项目，控制台出现[HPM] Proxy created: /api -> https://bio.torre.co日志即代表代理生效，此时请求不会再触发CORS错误。

生产环境注意事项 #

Angular内置代理仅适用于本地开发环境，生产部署时需要自行配置服务端反向代理（比如Nginx将/api路径请求转发到https://bio.torre.co），或者搭建后端中转接口规避跨域限制。

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