获取请求API的跨域请求阻止错误

Question

我在获取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。

感谢您的帮助！

Answer 1

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

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

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