Show the Local weather problem http

1

I get this in my console and nothing is displayed
Blocked loading mixed active content “http://ip-api.com/json”
[Learn More]

How to fix this?
https://s.codepen.io/fotisoikonomou/debug/yaKBkN/NjkYzwDegENM

2

That error:

Mixed Content: The page at ‘https://codepen.io/fotisoikonomou/pen/yaKBkN’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://ip-api.com/json’. This request has been blocked; the content must be served over HTTPS.

is trying to tell you that codepen uses https (secured) and your are calling an http (unsecured) resource and that is forbidden.

You could change your ip-api.com to https, but I think that ip-api.com doesn’t support that.

you might consider another technique to get the position:

  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

Either that or find an API that supports https.

3

thank you for answering !

4

Going along with what @ksjazzguitar said, if you want an IP API that supports https, I made one for the back-end challenges that you can use.

https://userinfo.glitch.me/

Edit: I forgot that ip-api gives a lot more than the just the IP such as latitude and longitude. You can also use ip-api through a CORS proxy, crossorigin.me is one, but I have found that cors-anywhere works better. You can just add it to the front of your url like this:

https://cors-anywhere.herokuapp.com/ip-api.com/json

/* or */

https://crossorigin.me/ip-api.com/json