Angular调用外部API出现No 'Access-Control-Allow-Origin'错误如何解决

错误原因 #

"No 'Access-Control-Allow-Origin' header is present on the requested resource" 是浏览器同源策略触发的CORS限制：Access-Control-Allow-Origin是服务端需要返回的响应头，前端主动在请求头添加该字段完全无效，反而可能触发额外的跨域校验，首先删除你添加的这个请求头配置。

现有代码的隐藏问题 #

你当前的HttpHeaders写法不会生效：HttpHeaders.append方法返回新的实例，原实例不会被修改，所以你添加的X-RapidAPI-Key头并没有真正带入请求，正确写法如下：

// 方式1：构造时直接传入配置
headers = new HttpHeaders({
  'X-RapidAPI-Key': 'myKey'
});
// 方式2：接收append返回的新实例
this.headers = this.headers.append('X-RapidAPI-Key', 'myKey');

代理配置失效的排查步骤 #

Angular本地代理仅在开发环境生效，必须按以下步骤配置才会生效：

• 根目录创建proxy.conf.json文件，内容如下：

{
  "/football-api": {
    "target": "https://api.football-data.org",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/football-api": ""
    }
  }
}

• 修改代码内的请求地址，不要写完整的外部域名，改为代理前缀：

this.url1 = '/football-api/v2/competitions/SA/scorers';

• 检查angular.json配置位置是否正确，必须配置在serve节点下而非build节点：

{
  "architect": {
    "serve": {
      "options": {
        "proxyConfig": "proxy.conf.json"
      }
    }
  }
}

• 重启本地开发服务：修改代理配置后必须停止ng serve重新启动，新配置才会生效。

生产环境解决方案 #

本地代理仅在开发阶段生效，生产环境部署时选以下任意一种方案即可：

• 联系football-data.org的接口提供方，给你的站点域名添加CORS白名单
• 部署时用Nginx做反向代理，把/football-api前缀的请求转发到https://api.football-data.org
• 用自己的后端服务做请求转发，前端请求自己的后端，再由后端请求football-data.org返回数据

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