Я использую React для рендеринга некоторых данных из этого API для моего проекта, но он показывает, что контроль доступа не разрешен. Есть идеи, что случилось? - PullRequest
Новая
       2

Я использую React для рендеринга некоторых данных из этого API для моего проекта, но он показывает, что контроль доступа не разрешен. Есть идеи, что случилось?

0 голосов
/ 30 апреля 2020

Это моя игра. js файл, который я импортирую в приложение. js. но он не показывает никаких данных на consol.log. Я использую только React js, а бэкэнда нет. Вместо этого он показывает, что Доступ к XMLHttpRequest в 'https://api.crackwatch.com/api/games' из источника 'http://localhost: 3000 ' был заблокирован политикой CORS: No 'Access-Control-Allow-Origin Заголовок присутствует на запрашиваемом ресурсе. 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;

1 Ответ

0 голосов
/ 06 мая 2020

Поскольку API могут запрашивать ресурсы только из одного источника

Вы можете использовать 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();
  },[]);
...