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

question from:https://stackoverflow.com/questions/66049606/getting-mixed-content-error-while-making-this-request-even-though-it-is-https

Answer 1

Waitting for answers