First off, I am not familiar with Axios, so I can only assume a few things based on what you posted here. It looks like Axios is treating your base URL as a resolvable URL for some type of a preflight request. But if you go to https://api.themoviedb.org/3, you'll see that it's not a resolvable URL (nothing exists there).

Soooo... as a temporary thing to try, don't use baseURL. An OPTIONS call to any of the actual methods, returns the correct headers, example:

Request

$ curl -i -X OPTIONS "https://api.themoviedb.org/3/trending/all/week?api_key=${API_KEY}&language=en-US"

Response

HTTP/2 204
date: Mon, 07 Sep 2020 15:36:22 GMT
server: openresty
access-control-allow-origin: *
access-control-allow-methods: GET, HEAD, POST, PUT, DELETE, OPTIONS
access-control-expose-headers: ETag, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, Retry-After, Content-Length, Content-Range
access-control-allow-headers: Authorization, Content-Type, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, Retry-After, DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Range
access-control-max-age: 1728000
x-cache: Miss from cloudfront
via: 1.1 ceb7b8c925a9435b9b08b23014561fbb.cloudfront.net (CloudFront)
x-amz-cf-pop: HIO51-C1
x-amz-cf-id: DRD3f1RYVwx5l3Pgdx4whaQhlhAoAYcCFsfF28wUDDHTORDnF5f1Sw==

Creating a new resolvable URL at https://api.themoviedb.org/3 is certainly doable, but it does not exist right now.

@travisbell said:

First off, I am not familiar with Axios, so I can only assume a few things based on what you posted here. It looks like Axios is treating your base URL as a resolvable URL for some type of a preflight request. But if you go to https://api.themoviedb.org/3, you'll see that it's not a resolvable URL (nothing exists there).

Soooo... as a temporary thing to try, don't use baseURL. An OPTIONS call to any of the actual methods, returns the correct headers, example:

Request

$ curl -i -X OPTIONS "https://api.themoviedb.org/3/trending/all/week?api_key=${API_KEY}&language=en-US"

Response

HTTP/2 204
date: Mon, 07 Sep 2020 15:36:22 GMT
server: openresty
access-control-allow-origin: *
access-control-allow-methods: GET, HEAD, POST, PUT, DELETE, OPTIONS
access-control-expose-headers: ETag, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, Retry-After, Content-Length, Content-Range
access-control-allow-headers: Authorization, Content-Type, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, Retry-After, DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Range
access-control-max-age: 1728000
x-cache: Miss from cloudfront
via: 1.1 ceb7b8c925a9435b9b08b23014561fbb.cloudfront.net (CloudFront)
x-amz-cf-pop: HIO51-C1
x-amz-cf-id: DRD3f1RYVwx5l3Pgdx4whaQhlhAoAYcCFsfF28wUDDHTORDnF5f1Sw==

Creating a new resolvable URL at https://api.themoviedb.org/3 is certainly doable, but it does not exist right now.

Hi there,

I'm facing with the same issue. If I make a request browser return me CORS problem. I've tried to used heroku cors everywhere but without success.

There is another workaround or you can solve this step?

thanks

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

I'm facing similar issue, and looking at the code, looks like you too are following the Clever Programmer tutorial for Netflix clone. Please let me know what worked for you.

@kausarshaikh said:

@kreo said:

I'm having same Issue. May i know the issue and the solution?

Im following clever programmer and im having the same issue

I'm facing the same issue as well.

If the explanation given by Travis Bell did not solve or help, then perhaps one of these conversations can help. Perhaps.

CORS issue

In case you have not researched here in the Forum, below the link of 2 posts with similar problem.
Maybe it helps:
https://www.themoviedb.org/talk/5f621eae93388b003864513c
https://www.themoviedb.org/talk/5eb07271a13533001b72740a

axios is properly working for me, using it client side. Here's an example of my code

"axios": "^0.21.0",

const options = {
  method: 'GET',
  url: 'https://api.themoviedb.org/3/movie/603',
  params: {
    api_key: 'api-key'
  }
}

axios(options)
  .then(data => console.log(data))
  .catch(error => console.log(error))

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;

@rafidah said:

@kausarshaikh said:

@kreo said:

I'm having same Issue. May i know the issue and the solution?

Hello did anyone find a solution I am getting the same error too

@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;

I tried this but still I am getting the same error

you find any solution yet ?

Hey guys I'm also facing the same issue and the clover programmmmmmer didn't say properly that they may have missed out something which we don't know.

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

@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