CODEWITHSUNDEEP
reactjsgoogle-cloud-platformfetchomdbapi
cosmicRover
cosmicRover

Reputation: 33

Data is not being fetched in react.js app when I host it on GCP/Heroku/Netlify

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

Upvotes: 0

Views: 37

Answers (1)

Steve G
Steve G

Reputation: 13367

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]

MDN on Mixed Content

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.

Upvotes: 0

Related Questions