Openweathermap not showing on Github Pages -SOLVED-

I built the local weather app on Codepen. I decided to move it over to Github to try out pages, but for some reason the weather information never loads. It just asks if I want to share my location. All of the other JS seems to be working fine, so I’m stumped. If anyone could help, I would appreciate it! Thanks!

Here are the links:


Looks like in your script.js file, line 276/277 you’re closing the script on the following line.
> var api = ‘http://api.openweathermap.org/data/2.5/weather?lat=’ + lat + ‘&lon=’ + lon + '&units=imperial&APPID=ec50a6072ac189dee111acdd3a38ab9f

';
and that actually throws an error in the console.

1 Like

Thanks! I just fixed it, but nothing changed. I checked the console and saw this error message:

Mixed Content: The page at ‘https://nikkilr88.github.io/localweather/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

http://api.openweathermap.org/data/2.5/weather?lat=21.1682895&lon=-101.6723306&units=imperial&APPID=ec50a6072ac189dee111acdd3a38ab9f’. This request has been blocked; the content must be served over HTTPS.

I am assuming and this is the issue… I just don’t know how to fix it.

EDIT

I just tested in FireFox, and the same thing happened. It seems that the browser is blocking the request to share location. I clicked “disable protection”, and everything appeared. Does anyone know how to fix this?

Looks like since the Github page is served over HTTPS the openweather api should also be invoked over HTTPS. Try adding a condition based on the location.protocol and if the page is HTTPS then you want to call the https version of the api, something like:

if (location.protocol === 'http:') {
   url = 'http://api.openweathermap.org/data/2.5/weather?lat=21.1682895&lon=-101.6723306&units=imperial&APPID=ec50a6072ac189dee111acdd3a38ab9f';
} else {
   url = 'https://api.openweathermap.org/data/2.5/weather?lat=21.1682895&lon=-101.6723306&units=imperial&APPID=ec50a6072ac189dee111acdd3a38ab9f';
}
1 Like

Thanks you!

It’s now fixed! I added ‘https://cors-anywhere.herokuapp.com/’ onto the API url. I will have to look into your solution as well. :smiley:

2 Likes

@nikkilr88 I have the same issue when I try to push React apps which use API calls on GitHub pages. I don’t understand the link you provided. Can you explain or give more researches to learn from.
Thanks

Yes, adding the link above made it work on my gh-page as well.

Works for my gh-page too, but I don’t understand the logic behind. Can anyone explain it.
Thanks