使用 Endpoint api-football.com 时出错（CORS 相关）答案

【问题标题】：Error consuming an Endpoint api-football.com (CORS related)使用 Endpoint api-football.com 时出错（CORS 相关）
【发布时间】：2020-05-29 00:25:45
【问题描述】：

我正在尝试在 api-football.com 上使用此端点

这是他们的文档：https://www.api-football.com/documentation-beta#section/Authentication

错误是：从源“http://localhost:4200”访问“https://v3.football.api-sports.io/teams?id=40”处的 XMLHttpRequest 已被 CORS 策略阻止：Access-Control-Allow-Headers 中的请求标头字段 x-rapidapi-host 不允许预检响应。

这是我的代码：

    httpOptions.headers = new HttpHeaders({
     // 'Access-Control-Allow-Origin': '*',
     // 'Access-Control-Allow-Methods': 'GET',
     // 'Accept': '*/*',
     'Content-Type': 'application/json',
     'x-rapidapi-host': 'v3.api-football.com',
     'x-rapidapi-key': this._publicKey,
    });

    const url = 'https://v3.football.api-sports.io/teams?id=40';

    return this.http.get<any>(url, httpOptions)
     .pipe(
       catchError(this.handleError('getLiverpool', []))
    );

我了解 CORS 是什么，但不知道在这种情况下如何解决它？我正在使用 Angular 9。

【问题讨论】：

这能回答你的问题吗？ XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

标签： javascript cors

【解决方案1】：

喂！

最简单的解决方案是使用您的后端作为中间件将请求发送到第 3 方 API。这个和其他更复杂的替代方案here

【讨论】：

【解决方案2】：

问题出在服务器上，它需要接受你的请求。

如果部署后它们将在同一服务器中，您可以在浏览器中禁用 cors，如果没有，则必须更新服务器

【讨论】：