Hello, I'm using React and Axios to make a call to the API and no matter how I try to set it up I get:
Access to XMLHttpRequest at 'https://api.themoviedb.org/3/search/movie/?api_key=XXXX&query=Ponyo&year=2008' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
It looks like the header is set properly though at least when I make a CURL call I get
* Trying 23.21.92.78...
* TCP_NODELAY set
* Connected to api.themoviedb.org (23.21.92.78) port 80 (#0)
> GET /3/search/movie?api_key=XXX&query=Ponyo&year=2008 HTTP/1.1
> Host: api.themoviedb.org
> User-Agent: curl/7.54.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< Access-Control-Expose-Headers: ETag, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, Retry-After
< Cache-Control: public, max-age=21600
< Content-Type: application/json;charset=utf-8
< Date: Mon, 13 May 2019 00:13:15 GMT
< ETag: 47a658229eb2368a99f1d032c8848542
< Server: openresty
< Vary: Accept-Encoding
< X-RateLimit-Limit: 40
< X-RateLimit-Remaining: 39
< X-RateLimit-Reset: 1557706405
< Content-Length: 1136
< Connection: keep-alive
<
* Connection #0 to host api.themoviedb.org left intact
{"page":1,"total_results":1,"total_pages":1,"results":[{"vote_count":1701,"id":12429,"video":false,"vote_average":7.6,"title":"Ponyo","popularity":22.523,"poster_path":"\/3s0mpSpLkI7cIhqWGrGbsiyvlsH.jpg","original_language":"ja","original_title":"崖の上のポニョ","genre_ids":[16,10751],"backdrop_path":"\/vK86ykZTcyMjYkin1zWfTulbU34.jpg","adult":false,"overview":"The son of a sailor, 5-year old Sosuke lives a quiet life on an oceanside cliff with his mother Lisa. One fateful day, he finds a beautiful goldfish trapped in a bottle on the beach and upon rescuing her, names her Ponyo. But she is no ordinary goldfish. The daughter of a masterful wizard and a sea goddess, Ponyo uses her father's magic to transform herself into a young girl and quickly falls in love with Sosuke, but the use of such powerful sorcery causes a dangerous imbalance in the world. As the moon steadily draws nearer to the earth and Ponyo's father sends the ocean's mighty waves to find his daughter, the two children embark on an adventure of a lifetime to save the world and fulfill Ponyo's dreams of becoming human.","release_date":"2008-07-19"}]}
Current code generating the request is:
return axios({
url: tmdb_api_url + 'search/movie/',
method: 'GET',
responseType: 'json',
params: {
api_key: tmdb_api_key,
query: title,
year: year
}
})
.then((response) => {
console.log('film: ', title, year);
console.log('res:', response.data.results[0]);
})
.catch((error) => {
console.log(error);
});
It doesn't look like I'm hitting any rate limiting. Everything I can find says this should work, but it's not and I'm not sure what I might be missing at this point.
Can't find a movie or TV show? Login to create it.
Want to rate or add this item to a list?
Not a member?
Reply by returnedusr
on May 17, 2019 at 2:50 AM
Hi @mattblasi , i just got the same issue if you still experiencing this issue. I got the solution.
Notice the forward slash after movie part that's what makes the request error in my case, because the first option is looking for queries on the index endpoint, "/movie/?parameters" equal to "/movie/index.html?paramaters " thus the request rejected because no one allowed to send request to the index endpoint. My explanation may be wrong, but the solution should be works. Thank you
Reply by mattblasi
on May 17, 2019 at 7:23 AM
I should have updated my post, I made the same change thinking the same thing a few days ago. I didn't think to come back and update it though. Thanks :)
Reply by Movie-vegas
on May 23, 2019 at 5:17 AM
Hi mattblasi To send a request on localhost set withCredentials flag false