尝试从 localhost 访问 api 时如何解决“Access-Control-Allow-Origin”错误

Question

看到了很多关于这个错误的话题，但是我对js和api很陌生，所以我不能真正理解太多，所以对于noob状态我表示歉意。

我正在尝试从 Sportradar 访问 api。我在一个从 create-react-app 创建并使用 axios 的简单反应项目上对其进行测试。当我 console.log 数据时，我得到这些错误：https://dzwonsemrish7.cloudfront.net/items/372w3g2b3F141t2P0K1G/Image%202018-09-04%20at%2011.33.38%20AM.png

我想我无法从本地主机访问它？这是我的请求功能：

getPlayerInfo() {
  const apiKey = "my-api-key";
  const playerID = "41c44740-d0f6-44ab-8347-3b5d515e5ecf";
  const url = `http://api.sportradar.us/nfl/official/trial/v5/en/players/${playerID}/profile.json?api_key=${apiKey}`;


  axios.get(url).then(response => console.log(response));
}

Answer 1

如果后端支持 CORS，您可能需要在请求中添加此标头：

headers: {"Access-Control-Allow-Origin": "*"}

你的代码应该是这样的：

getPlayerInfo() {
  const apiKey = "my-api-key";
  const playerID = "41c44740-d0f6-44ab-8347-3b5d515e5ecf";
  const url = `http://api.sportradar.us/nfl/official/trial/v5/en/players/${playerID}/profile.json?api_key=${apiKey}`;
  const config = {
    headers: {'Access-Control-Allow-Origin': '*'}
  };


  axios.get(url,config).then(response => console.log(response));
}

希望这会有所帮助！