Show the Local Weather - can't use geolocation API on insecure server (codepen.io)

Show the Local Weather - can't use geolocation API on insecure server (codepen.io)
0
#33

Your code really helped me to understand how to make this project. I should confess that many things I just took from your code and put into mine.

#34

Thanks! It did the trick!

#35

You can fix this problem changing your codepen link. Change https for http.

#36

I find both of these give me a location that is a lot further south then my current location. They are not accurate enough. My only real option is to use the GeoLocation method and use HTTPS with codepen?

#37

My weather app has worked for 2 days using the Geolocation API before getting the mixed content problem on Codepen. I’ve now switched to freegeoip.net and it’s working again. However, the location doesn’t seem to be as accurate as using the geolocation API, but it’s acceptable nonetheless. Thanks for the info ::smiley:

#38

Hi Guys,

This caused me many hours of frustration.

If you still want to use the Geolocation API instead of using the IP tracking sites it was recommended to me by another user to use the CrossOrigin CORS Proxy.

This Proxy allows you to successfully share data between HTTP and HTTPS sites.

Append the CrossOrigin URL before your weather API url.

For example: https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=b1b15e88fa797225412429c1c50c122a1

Also, when using CodePen, ensure you are accessing it via HTTPS://

Hope this helps!

5 Likes
#39

Hey Nims, your solution with crossorigin.me + accessing codepen via https is by far the better in my case. I didn’t have to rewrite all the application (finished a long time ago), thanks to your trick. I owe you one! Thanks a lot, Donatien.

2 Likes
#40

No problem, I’m glad I could be of assistance. The community for FreeCodeCamp is great!

#41

This worked like a charm!

1 Like
#42

I have spent so many hours trying to figure this out. I just can’t do it. I’ve even copied several people’s codes, and tweaked and tried countless combinations to get the damn geo location data.

Can someone just tell me how to do it? I can figure out everything else on my own, I’m just tired of wasting my time trying to figure this out. I have tried every suggestion in this thread, and I keep getting errors. This challenge has driven me insane.

#43

Hi , maybe you can check on mine : http://codepen.io/CaiYiLiang/full/WoExeB/

#44

Crossorigin.me just shows an empty page with “Origin: header is required” written on it for me. So pretty much can’t use the true geolocation of the device because we have to use https, which prevents us from using http API calls (which weathermap has).

To sum it up, we either use ip address location (innacurate sometimes) or use some sort of proxy magic to use real geolocation with weathermap API.

#45

Hi Andren,

This is a new issue, I have been travelling the world for the past 4 months and have not been coding. The cross origin proxy was working before I left, but this seems to be a new issue.

If anyone can offer assistance that would be great!

It seems to be an issue from the crossorigin proxy. Time to start trouble shooting.

#46

If you use html5 geolocation, you must use https, and CORS issue will come. To solve this, just use http and another location api. However, I still don’t know how to solve problem with loc propertiy.

#47

I am using geolocation API with https. I call the owm API like so:

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?q=

It works.

EDIT: apparently it’s not advised to use it, but I leave the decision up to you. More info is here: https://github.com/Rob–W/cors-anywhere/#demo-server

4 Likes
#48

I ended up using https://ipinfo.io/geo API to get my latitude and latitude numbers. It works in http://codepen.io which is not secure (not https).

#49

dude. so much help! thanks!

#50

Thank you so much; saved my app!

#51

Thank you for this GarrusNapp.

#53

Thank you!! works for me too.