Could anyone help me with this?
It works fine for me yet all the people that I sent the link to say that it won’t load their country/temperature.
You can see the problem watching inside the chrome console:
Font from origin 'https://production-assets.codepen.io' has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header has a value 'https://codepen.io' that is not equal to the supplied origin. Origin 'http://codepen.io' is therefore not allowed access.
pen.js:8 getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
Hi,
Yes, its a cross origin problem.
You see chrome (and i think most other browsers) will only get the browser’s location if you are using HTTPS (a secure connection).
This conflicts with open weather’s free API which only allows you to use HTTP.
So, if you switch to HTTPS, the location will work but the API request won’t. And vica versa.
There are threads in this form relating to CORS (cross origin request something-or-other) which will help you out but honestly I think the easiest way to get round this is to use an API that supports HTTPS and has reasonable documentation - like Apixu.
This way you can use https on codepen url, api request and fonts CDN’s and also use location.
And as @NeckersBOX said, using the console (press F12 in browser, then console tab) is a must really when trying to figure out whats going on.
Thanks a lot peeps! Yeah, I would have used the console, but like I said, the code works just fine for me(Must be cause I’m using Mozzila I guess?). So I had to ask for help. Thanks a lot for the answers!
Hey @Kima
May be its because they blocked Share location option on their browser
Ah yes, works for me in firefox too.
Its defo the other browsers blocking the location request though.
I think the “don’t allow geo-location without a secure connection” is going to be implemented into some standard - and google has adopted it early.
Firefox is also giving me problems now with the issue, i guess I’ll have to follow this solution https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins