Can't solve No 'Access-Control-Allow-Origin' in React App(I have only front-end)

Question

Using Rapidapi API and trying to fetch dynamic data from this endpont https://www.freetogame.com/api/game?id=${number} at the end getting CORS error.

UPDATE: I was using the wrong API(https://www.freetogame.com/api/game?id=${number}) I was supposed to use https://free-to-play-games-database.p.rapidapi.com/api/game this API and it is fixed my CORS errors(literally I didn't install any library or dependency or didn't add proxy). Thank you all for your support!

Error Access to fetch at 'https://www.freetogame.com/api/game?id=1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have tried(installed) the CORS extension is working very well if turning off the extension getting error(you can see above) and tried the most recommended option adding packeges.json file "proxy": "https://www.freetogame.com/", base url but still cannot solve the issue

FYI: I don't have a back-end code or not using express

import { Container, Grid, Box } from "@mui/material";
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import GameListInfoLeft from "./GameListInfoLeft";
import GameListInfoRight from "./GameListInfoRight";

const GameListInfo = () => {
  let { id } = useParams();
  const [gameInfo, setGameInfo] = useState([]);

  const getInfo = async (name) => {
    const data = await fetch(`https://www.freetogame.com/api/game?id=${name}`);
    const response = await data.json();
    setGameInfo(response);
  };

  useEffect(() => {
    getInfo(id);
  }, [id]);

  return (
    <>
      <Header />
      <Container>
        <Box sx={{ padding: 4, backgroundColor: "#2A2E33", color: "#AAAAAA" }}>
          <Grid container spacing={1}>
            <Grid item xs={12} sm={5}>
              <GameListInfoLeft gameInfoLeft={gameInfo} />
            </Grid>
            <Grid item xs={12} sm={7}>
              <GameListInfoRight gameInfoRight={gameInfo} />
            </Grid>
          </Grid>
        </Box>
      </Container>
      <Footer />
    </>
  );
};

export default GameListInfo;

Answer 1

Actually, you are not currently using the Rapidapi, you are using the FreeToGame API directly, if you use the Rapidapi that issue will be solved.

The Host should be: free-to-play-games-database.p.rapidapi.com and like all the RapidApi APIs you need to include the RapidAPI key.

Something like this example below:

const options = {
    method: 'GET',
    headers: {
        'X-RapidAPI-Host': 'free-to-play-games-database.p.rapidapi.com',
        'X-RapidAPI-Key': 'SIGN-UP-FOR-KEY'
    }
};

fetch('https://free-to-play-games-database.p.rapidapi.com/api/game?id=452', options)
    .then(response => response.json())
    .then(response => console.log(response))
    .catch(err => console.error(err));