I'm trying to fetch some movie data by title from OMDB. It works just fine on my machine but when I host it on providers such as GCP/Heroku/Netlify my search don't return anything. Here is the link to the GCP hosted site: https://joypaultheshoppies1234.web.app and here is the repo with codes: https://github.com/cosmicRover/the_shoppies you can see in the gif that the searches are supposed to return some items as JSON
It's failing with the error message:
Mixed Content: The page at 'https://joypaultheshoppies1234.web.app/' was loaded
over HTTPS, but requested an insecure resource 'http://www.omdbapi.com/?s=T&apikey=[your_api_key]'.
This request has been blocked; the content must be served over HTTPS.
Your browser is blocking the fetch from https://joypaultheshoppies1234.web.app/ because you're making a request from a secure site (https) to a non secure endpoint (http). It's not failing on your local machine because (I'm assuming) your locally running site is not secured.
Solution:
Change the URL (protocol) string in your application to the endpoint from http to https. (https is supported by that OMDB endpoint.)
For example: https://www.omdbapi.com/?s=Top+Gun&apikey=[your_api_key]
Mixed content
When a user visits a page served over HTTPS, their connection with the web server is encrypted with TLS and is therefore safeguarded from most sniffers and man-in-the-middle attacks. An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. That leaves the pages unsafe.