How to solve CORS issue making Deezer API call

30 views Asked by At

I do two Deezer API calls to get data from two URLs, but the issue is that it throws me a CORS error. But when I do only one request it works. What can be a problem and how to solve it? But it does not work for me. Using postman it gives me response successfully!

Access to XMLHttpRequest at 'https://api.deezer.com/artist/145/top?limit=10' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

export const useFetch = (url, url2) => {
  const [isLoading, setIsloading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [isError, setIsError] = useState(null);


useEffect(() => {
    setIsloading(true);
    const allPromise = Promise.all([
      axios.get(url, {
        headers: {
          "X-RapidAPI-Key": process.env.REACT_APP_API_KEY,
          "X-RapidAPI-Host": process.env.REACT_API_HOST,
          "Access-Control-Allow-Origin": "https://localhost:3000/",
        },
        mode: "cors",
      }),
      axios.get(url2, {
        headers: {
          "X-RapidAPI-Key": process.env.REACT_APP_API_KEY,
          "X-RapidAPI-Host": process.env.REACT_API_HOST,
          "Access-Control-Allow-Origin": "https://localhost:3000/",
        },
        mode: "cors",
      }),
    ]);

    try {
      const values = allPromise;
      console.log(values); // [resolvedValue1, resolvedValue2]
      setApiData(values);
    } catch (error) {
      console.log(error); // rejectReason of any first rejected promise
    }
  }, [url]);
  return { isLoading, apiData, isError };
};

I create react hook that I use in component like this:

const SongList = () => {
  const { isLoading, apiData, isError } = useFetch(
    process.env.REACT_APP_API_URL_PLAYLIST,
process.env.REACT_APP_API_URL
  );
  console.log(apiData);
}
0

There are 0 answers