这是我在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
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;发布于 2020-05-06 11:33:17
因为APIs只能从同一来源请求资源。
您可以使用CORS-Anywhere来解决这个问题。
编辑代码
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();
},[]);https://stackoverflow.com/questions/61518583
复制相似问题