I have same issue pleas if anyone know the the way how to fix the cors same issue and the clover programmmmmmer

You have to disable the CORS first.

@fayad-2021 said:

I have same issue pleas if anyone know the the way how to fix the cors same issue and the clover programmmmmmer

yes first do disable the cors dude then you can see the http request

@fayad-2021 said:

I have same issue pleas if anyone know the the way how to fix the cors same issue and the clover programmmmmmer use this

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=en

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..

@fayad-2021 said:

@PrawinPravs said:

import axios from "axios";

const config = { headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "text/plain", }, }; const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", https: config, });

export default instance;

Really it works so well i got it ..

Before going to execute the code you should have to disable the CORS issue by running the commends

how this working with you i am doing same this code and not working for me

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.

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

Chrome extension for cors This will fix the problem.

@kreo said:

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`,
}

same problem i had, still don't know what's wrong

@PrawinPravs hey dude the error is gone but it is still not returning the object

@fayad-2021 said:

@PrawinPravs said:

import axios from "axios";

const config = { headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "text/plain", }, }; const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", https: config, });

export default instance;

Really it works so well i got it ..

Before going to execute the code you should have to disable the CORS issue by running the commends

how this working with you i am doing same this code and not working for me

Didn't work for me either. Anybody got the solution? Following the netflix clone tutorial by qazi.

@PrawinPravs said:

import axios from "axios";

const config = { headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "text/plain", }, }; const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", https: config, });

export default instance;

Really it works so well i got it ..

Before going to execute the code you should have to disable the CORS issue by running the commends

What do you mean "by running the commends"?

Hi Devs This worked for me

const requests = {
    fetchTrending : `https://api.themoviedb.org/3/trending/all/week?api_key=${API_KEY}&language=en-US`
}

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

@zaferozcan said:

replace your axios.js file with this

import axios from "axios";

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "text/plain",
  },
};
const instance = axios.create({
  baseURL: "https://api.themoviedb.org/3",
  https: config,
});

export default instance;

thanks problem is solved

@kreo said:

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`,
}

hey try adding this at the end of requests.js

"export default requests; "

worked for me