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

时间:2018-09-04 17:16:11

标签: javascript reactjs api xmlhttprequest axios

我已经看到很多有关此错误的主题,但是我对js和api还是很陌生,所以我不太了解,所以我为菜鸟身份道歉。

我正在尝试从sportradar访问api。我正在从create-react-app使用axios创建的一个简单的react项目上对其进行测试。当我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));
}

1 个答案:

答案 0 :(得分:0)

如果后端支持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));
}

希望这会有所帮助!