Darksky Weather API Does not work on CodePen

So I’m working away on https://www.freecodecamp.com/challenges/show-the-local-weather

only to find that the weather api suggested by using html5 geolocation doesn’t work with things like codepen. What should I use instead?

1 Like

I used the Darksky API, but to get geolocation (latitude and longitutde), I used another API to get that info first. I then plugged in the the lat and lon into darksky GET request-- bingo! I’ve got all the weather info I could possibly hope for.

Here’s the geolocation api I used:

https://freegeoip.net/json/

To get the weather json from Darksky, you’ll need to go through a CORS proxy. You won’t need that proxy for the geolocation json, though.

1 Like

For reference that anyone else may find helpful, this blog on codepen shows a good site to use for CORS proxy.

And I used this URL for the GET: https://crossorigin.me/https://api.darksky.net/forecast/[key]/[lat],[long]

3 Likes

Darksky works for my app on codepen. Also I use this API to get the location https://geoip-db.com

Why do you guys even use API to get location? What’s wrong with navigator.geolocation.getCurrentPosition(function(position)
returning this gives me the correct latitude and longitude. Then I pass it to API link that DarkSky provides.
like "https://api.darksky.net/forecast/key/" + latitude + "," longitude
My problem starts from here, which is:

XMLHttpRequest cannot load https://api.darksky.net/forecast/key/41.0883312,29.046414999999996. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://s.codepen.io' is therefore not allowed access.
1 Like

Well, using the geolocation api built into the browser depends on the user allowing us to get that information in the first place. If a user has blocked or refused geolocation in their browser, then we won’t be able to pass in a location into our weather api.

I think I used an api for location b/c it would try to find the ISP server that the user is using to connect to the internet. We’ll get a location, but I’ve noticed that it may not be very accurate. For instance, I live on the north side of Chicago, but the lat and lon I plug into google maps shows me on the south side. Thankfully, weather in Chicago only varies based on proximity to the Lake, so I still get accurate weather info.

However, what if a user is using a vpn? I think that’s where our app, as a project defined by fCC, breaks down. Getting the weather based on user input would be a nice option. Hmm… I’d like to hear others’ thought process, and please point out any assumptions that I’m getting wrong, haha.

So Dark Sky doesn’t allow CORS for security reasons according to their site. But I have found you can bypass it by using jsonp: ‘callback’ when making the ajax call. The crossorigin.me method doesn’t work from my experience.

3 Likes

Wish I could like this a million times!
Is JSONP the solution for all the “No ‘Access-Control-Allow-Origin’ header is present” errors on CodePen?
[This stackoverflow thread] (https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about) suggests that JSONP is not secure. I was wondering whether there was a way get JSON back on CodePen…
Appending “https://crossorigin.me/” in front of the URL returns the same error for me at the time of writing…

Yup! Of if you have end users like me that instantly dont allow access to anything that pops up on the browser, then it wont work. I never accept location requests on any website…and have to make a conscious effort to remember to accept it when I look at weather projects that require it. So from a user point of view, its a privacy issue…if something needs my location and requires me to give permission…well, Im just not going to see it then.

From the point of view as someone putting it together, ts a userability issue…I dont want to make my end users deal with popups to do things before they can see my content or take the risk they will be like me, deny access then move on.

1 Like

Yes, JSONP could open you up for XSS attacks. However using it for just this codepen project isn’t an issue. I would not use JSONP if I was hosting an application from my server.

My understanding is that it’s not much different than standard tags (could you imagine if jQuery added some malicious code to their library… automatically distributed to who knows how many websites… they could break the internet).

We should always vet the data coming out of services. Anything we do that depends on outside data comes with trust.

But that’s why jsonp adds the callback, I think, so that we can have a last say in how that new information is integrated. In that same StackOverflow thread, there’s also a comment on how to possibly cleanse your response before use.

I’d prefer to not use jsonp if I have options, but for simple(ish) things, it’s an extra tool worth knowing about.

Good points. I think more and more people are becoming aware of privacy and security these days.

Thinking on this again, I think I would actually give the user a choice. If geolocation is allowed, use that, else indicate that a geolocation api is going to guess their geolocation (albeit a simpler message to the user). But ya, nobody got time for any popups!

1 Like

Also, here’s what I use to call the darksky api. It works through codpen.io on chrome with the HTTPS Everywhere extension activated. However, if the crossorigin.me site is down, then ya, its not going to work. I really don’t think using either a jsonp or a proxy site is better than the other; whatever works for our project, eh?

        var weatherUrl =
            "https://crossorigin.me/" +
            "https://api.darksky.net/forecast/" +
            apiKey +
            lat +
            "," +
            lon +
            "?exclude=hourly,daily,alerts,flags";