Hello I'm getting this CORS error and can't figure out how to overcome this:
Access to XMLHttpRequest at 'https://api.themoviedb.org/3' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js:184 GET https://api.themoviedb.org/3 net::ERR_FAILED
This is my request code:
async function fetchData(){
const response = await axios.get(requests.selectedOption);
console.log(response);
setMovies(response.data.results);
return response;
}
and this is config 1:
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.themoviedb.org/3',
});
export default instance;
and this is config 2:
const API_KEY = here goes my api key;
export default {
fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
fetchTopRated: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
fetchActionMovies: `/discover/movie?api_key=${API_KEY}&with_genres=28`,
fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genres=35`,
fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genres=27`,
fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,
fetchMystery: `/discover/movie?api_key=${API_KEY}&with_genres=9648`,
fetchSciFi: `/discover/movie?api_key=${API_KEY}&with_genres=878`,
fetchWestern: `/discover/movie?api_key=${API_KEY}&with_genres=37`,
fetchAnimation: `/discover/movie?api_key=${API_KEY}&with_genres=16`,
fetchTV: `/discover/movie?api_key=${API_KEY}&with_genres=10770`,
}
Nie możesz znaleźć filmu lub serialu? Zaloguj się, aby go utworzyć.
Want to rate or add this item to a list?
Not a member?
Odpowiedź użytkownika fayad-2021
5 marca 2021 o godz. 10:33AM
I have same issue pleas if anyone know the the way how to fix the cors same issue and the clover programmmmmmer
Odpowiedź użytkownika PrawinPravs
5 marca 2021 o godz. 10:59AM
You have to disable the CORS first.
Odpowiedź użytkownika PrawinPravs
5 marca 2021 o godz. 11:00AM
yes first do disable the cors dude then you can see the http request
Odpowiedź użytkownika PrawinPravs
5 marca 2021 o godz. 11:09AM
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=en
Odpowiedź użytkownika PrawinPravs
5 marca 2021 o godz. 11:12AM
Even you can use this command and run the command chromium-browser --disable-web-security --user-data-dir="[some directory here]" you will get a warning ignore it and run your localhost:300 in to that page and you can fetch the data from TMDB cool don't forget to replay if your problem get solved..
Odpowiedź użytkownika ccamiletti
5 marca 2021 o godz. 12:17PM
this is not an error about the api. you get this error basically because it is a different domain than your page is on. you can implement a "reverse proxy" with Nginx for example.
Odpowiedź użytkownika PrawinPravs
5 marca 2021 o godz. 12:54PM
Whatever i said till now you just follow it because ನ್ was also facing the same issue by seeing that clover prgmmr but finally i have done deployment also
Odpowiedź użytkownika leggasick_vincent
9 marca 2021 o godz. 4:32PM
Chrome extension for cors This will fix the problem.
Odpowiedź użytkownika adamfadly
10 marca 2021 o godz. 5:54AM
same problem i had, still don't know what's wrong
Odpowiedź użytkownika Reactingreactnetflix
16 marca 2021 o godz. 6:37PM
@PrawinPravs hey dude the error is gone but it is still not returning the object
Odpowiedź użytkownika aves__rastogi
11 maja 2021 o godz. 4:58AM
Didn't work for me either. Anybody got the solution? Following the netflix clone tutorial by qazi.
Odpowiedź użytkownika covfefe101-vik
25 czerwca 2021 o godz. 11:11AM
What do you mean "by running the commends"?
Odpowiedź użytkownika Enzeakor
15 sierpnia 2021 o godz. 9:47PM
Hi Devs This worked for me
Instead of having the baseUrl in axios.js. let it be in the above format so axios.js doesnt exist. Note: when calling axios make sure you import it globally. Hope this helps you to
Odpowiedź użytkownika mosmmy
30 listopada 2021 o godz. 4:04AM
thanks problem is solved
Odpowiedź użytkownika akhilatadi
4 stycznia 2022 o godz. 2:34PM
hey try adding this at the end of requests.js
"export default requests; "
worked for me