Openweathermap not showing on Github Pages -SOLVED-

1

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:


2

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
3

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

Mixed Content: The page at ‘Local Weather’ 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?

4

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
5

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
6

@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

7

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

8

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