获取请求 API 的跨域请求被阻止错误 [重复]答案

【问题标题】：Cross-Origin Request Blocked error for get request API [duplicate]获取请求 API 的跨域请求被阻止错误 [重复]
【发布时间】：2020-07-18 13:24:20
【问题描述】：

我在获取 API 时遇到问题，这是我的代码：

const OPTIONS = {
  method: 'GET',
  headers: {
    'X-Auth-Token': process.env.FOOT_KEY,
  }
};

export async function setLeagues() {
  const countries = [
    {
      name: "Ligue 1",
      leagues_id: 2015
    },
    {
      name: "Premier League",
      leagues_id: 2021,
    },
    {
      name: "Bundesliga 1",
      leagues_id: 2002,
    },
    {
      name: "Primera Division",
      leagues_id: 2014,
    },
  ]

  let allLeagues = [];

  for (const country of countries) {
    const { name, leagues_id } = country;
    const response = await fetch(
      `http://api.football-data.org/v2/competitions/${leagues_id}`,
      OPTIONS
    );
    const data = await response.json();
    allLeagues.push(data);
  }

  return {
    type: "SET_LEAGUES",
    payload: allLeagues
  }
}

但我有一个控制台错误：

但是，当我向邮递员发出请求时，返回的响应包含：访问控制允许来源：*。

最后，错误似乎只出现在 Firefox 上，而不出现在 chrome 上。

我尝试获取这个 API：football-data.org/docs/v2/index.html#_cors_handling，谁启用了 CORS。

感谢您的帮助！

【问题讨论】：

尝试添加 CORS 标头
您能具体说明一下吗？ ^^
你的意思是：模式：'cors'？如果，是的，这是默认设置，无论如何我都尝试过，但那不起作用。
您可能想要更新问题以明确说明您知道该 API 的文档表明它已启用 CORS。您可以引用文档部分的 URL football-data.org/docs/v2/index.html#_cors_handling。鉴于 API 启用了 CORS，很奇怪你在调用它时会收到 CORS 错误，而且很奇怪你只会在 Firefox 中收到错误
在 Firefox 中，响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

标签： javascript cors fetch

【解决方案1】：

这可能更有效，但是当我遇到类似问题时，我就使用了这个。我建议在任何地方使用 cors。本质上，您将托管您自己的服务版本，并使用 cors-anywhere 作为代理发出您的请求。 Cors-anywhere 将为您添加必要的标题和处理 cors。

https://github.com/Rob--W/cors-anywhere

此外，一旦您运行它，请确保设置您的环境变量，以便您只允许来自您网站的流量。我会看起来像这样：export CORSANYWHERE_WHITELIST=https://example.com

【讨论】：