Getting mixed content error while making this request (even though it is https)

Question

I am practicing fetch-api by building a small movie search app with reactjs.

It is working fine on localhost but when I deployed it on netlify getting this error.

Mixed Content: The page at 'https://movie-search-abhi28069.herokuapp.com/' was loaded over HTTPS, but requested an insecure resource 'http://api.themoviedb.org/3/search/movie?api_key=####&query=prime'. This request has been blocked; the content must be served over HTTPS.

fetch(
        "https://api.themoviedb.org/3/search/movie/?api_key=####&query=" +
          term
      )
        .then((res) => res.json())
        .then((data) => setMovies(data.results))
        .catch((err) => console.log(err));

I have another fetch call when the component is loaded to get trending movies, it's working fine. Not sure why my search requests are converting to http automatically.

Answer 1

According to https://www.themoviedb.org/talk/5dd34e7957d3780015dcfd99
With the trailing slash, your request will be redirected to http.
Removing the trailing slash will solve the problem.

fetch(
    "https://api.themoviedb.org/3/search/movie?api_key=####&query=" +
      term
  )
    .then((res) => res.json())
    .then((data) => setMovies(data.results))
    .catch((err) => console.log(err));