API doesn't work when put online

Hello,
I made a weather app that runs perfectly on my computer but when I put it online, the API seems to stop working. Does anyone know what’s the problem here?
Here’s the link https://weatherapp3211.netlify.app

If you visit the link and open the dev console, you’ll see some errors.

Here’s the important one:

Mixed Content: The page at 'https://weatherapp3211.netlify.app/' was loaded over HTTPS, but requested an insecure resource 'http://api.openweathermap.org/data/2.5/weather?lat=39.1783122&lon=-84.4078419&appid=ba54c777cc51ef2eb1d2bdd0760f0908&units=metric'. This request has been blocked; the content must be served over HTTPS.

Formatting is weird, so it says that the API request was made from HTTPS to HTTP, which I guess is a security issue. So you need to find an API that supports HTTPS. If you’re looking for American weather, you can use: https://www.weather.gov/documentation/services-web-api (the government’s API. also it’s free).

Hope this helped.

1 Like