首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我正在使用React为我的项目呈现来自这个api的一些数据,但是它向我展示了没有访问控制允许起源。你知道怎么回事吗?

我正在使用React为我的项目呈现来自这个api的一些数据,但是它向我展示了没有访问控制允许起源。你知道怎么回事吗?
EN

Stack Overflow用户
提问于 2020-04-30 08:00:06
回答 1查看 34关注 0票数 0

这是我在App.js中导入的App.js文件。但它没有在consol.log上显示任何数据。我只使用了React,并且没有后端。相反,它显示从原点“XMLHttpRequest”到“https://api.crackwatch.com/api/games”的访问“http://localhost:3000”已被CORS策略阻止:请求的资源上不存在“访问控制-允许-原产地”标题。xhr.js:178 GET https://api.crackwatch.com/api/games net::ERR_FAILED

代码语言:javascript
运行
复制
import React,{useState,useEffect} from 'react';
import Axios from 'axios';
const Games=()=>{
  const [games,setGames] =useState([]);
  useEffect(()=>{
      const fetchData = async () => {
          const result = await Axios.get('https://api.crackwatch.com/api/games')
          console.log(result.data);
         let dataArray = result.data.data
      setGames (dataArray);
      };
      fetchData();
  },[]);
  return( <div>
    <h1>Most Popular Games</h1>
    <div className="live-update">
      <div className="inner">
      </div>
      <h6 className="header-6">Live Updates</h6>
      </div>
    <div className="row">
    {games.map(game =>(
        <div className="column" key={game.id}>
            <div className="card">
    <h3>{game.title}</h3>
                 <button className="learn-more">Learn More</button>
              </div>
              </div>
    ))}
    </div>
  </div>
  );
}
export default Games;
EN

回答 1

Stack Overflow用户

发布于 2020-05-06 11:33:17

因为APIs只能从同一来源请求资源。

您可以使用CORS-Anywhere来解决这个问题。

编辑代码

代码语言:javascript
运行
复制
  const Games=()=>{
  const [games,setGames] =useState([]);
  useEffect(()=>{
      const fetchData = async () => {
          const result = await Axios.get('https://cors-anywhere.herokuapp.com/https://api.crackwatch.com/api/games')
          console.log(result.data);
         let dataArray = result.data.data
      setGames (dataArray);
      };
      fetchData();
  },[]);
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61518583

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档