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);
}