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`,
}
¿No encuentras una película o serie? Inicia sesión para crearla:
¿Quieres puntuar o añadir este elemento a una lista?
¿No eres miembro?
Contestado por fayad-2021
el 5 de marzo de 2021 a las 10:33
I have same issue pleas if anyone know the the way how to fix the cors same issue and the clover programmmmmmer
Contestado por PrawinPravs
el 5 de marzo de 2021 a las 10:59
You have to disable the CORS first.
Contestado por PrawinPravs
el 5 de marzo de 2021 a las 11:00
yes first do disable the cors dude then you can see the http request
Contestado por PrawinPravs
el 5 de marzo de 2021 a las 11:09
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=en
Contestado por PrawinPravs
el 5 de marzo de 2021 a las 11:12
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..
Contestado por ccamiletti
el 5 de marzo de 2021 a las 12:17
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.
Contestado por PrawinPravs
el 5 de marzo de 2021 a las 12:54
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
Contestado por leggasick_vincent
el 9 de marzo de 2021 a las 16:32
Chrome extension for cors This will fix the problem.
Contestado por adamfadly
el 10 de marzo de 2021 a las 05:54
same problem i had, still don't know what's wrong
Contestado por Reactingreactnetflix
el 16 de marzo de 2021 a las 18:37
@PrawinPravs hey dude the error is gone but it is still not returning the object
Contestado por aves__rastogi
el 11 de mayo de 2021 a las 04:58
Didn't work for me either. Anybody got the solution? Following the netflix clone tutorial by qazi.
Contestado por covfefe101-vik
el 25 de junio de 2021 a las 11:11
What do you mean "by running the commends"?
Contestado por Enzeakor
el 15 de agosto de 2021 a las 21:47
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
Contestado por mosmmy
el 30 de noviembre de 2021 a las 04:04
thanks problem is solved
Contestado por akhilatadi
el 4 de enero de 2022 a las 14:34
hey try adding this at the end of requests.js
"export default requests; "
worked for me