Show the Local Weather: OpenWeatherMap Warning

Show the Local Weather: OpenWeatherMap Warning
0
#1

Just a heads up to anybody thinking of using OpenWeatherMap to get their weather data for this project: to use the JavaScript geolocation API you have to be running over a HTTPS connection, if you’re running over a HTTPS connection then all your external API requests must also go over a HTTPS connection. The problem is that OpenWeatherMap only allow HTTPS requests if you pay them money.

I built my project using some test data that I grabbed from them (to prevent excessive API calls, which they limit to a certain number per hour) and so I only found out that my project wouldn’t actually work after I’d already built it around OpenWeatherMap. :weary:

Hopefully somebody reads this before making the same mistake.

#2

You can use https://crossorigin.me. If you add this url before your api url, it should work:

https://crossorigin.me/http://openweathermap.com/whatever

#3

It takes a really long time then I get the error:

index.html:1 XMLHttpRequest cannot load https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=...&lon=...&appid=.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. The response had HTTP status code 522.
#4

Seems like crossorigin.me is down…

https://cors-anywhere.herokuapp.com/ should work though.

#5

Perfect timing. :anguished::grinning:

I think I’ll just cut my losses and switch to the Dark Sky API.

#6

The other link works.[quote=“BenGitter, post:4, topic:60292”]
https://cors-anywhere.herokuapp.com/ should work though.
[/quote]

Guys help me with My weather app!
#7

I decided to use google geolocation APIs as a replacement to navigator.geolocation.
Here is more about it: The Google Maps Geolocation API

#8

That Google API is very inaccurate. It thinks I’m 123 miles away.

#9

So is this any good then Ben? I tried the crossorigin.me one a while ago and found it took forever to make requests.

#10

Well this link seems to be up all the time (that crossorigin.me isn’t working). Unless you want to use your app regularly, I don’t see a problem. I suppose it is not a clean solution to add such a link to your api url, but it works great as a quick fix. If you now upfront that you will need this, you might want to search for another api.

But, I have’t used cors-anywhere much, so I don’t know if it is faster.

#11

From a cursory glance at the crossorigin.me Twitter account it seems it isn’t a new problem. I guess they just don’t have enough bandwidth/resources and so the server gets overloaded.

#12

must be someones bootcamp project :smiley:

#13

Or…you just stick with using HTTP:

Take a look at this link http://ipinfo.io/developers/jsonp-requests. The site allows 1000 API requests a day (should be more than enough for the project).

And just using this site a simple jquery call should allow you to use your existing HTTP javascript.

$.get(“http://ipinfo.io”, function(response) {
console.log(response.ip, response.loc);
}, “jsonp”)

#14

For background on this issue, see: https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7853

Here’s what I’d recommend:

  • Use navigator.geolocation and fall back to an IP-based location API if that fails.Here’s a basic example on how to do that: https://codepen.io/TylerMoeller/pen/XNvJzy
  • Use a weather API that supports both HTTP and HTTPS, like Weather Underground, Apixu, or Dark Sky.

Lots of people hit this issue regularly, hopefully the project guidelines will be updated with more information soon.

#15

I had the same problem with codepen. I finished my weather app a while ago, and when I tried using it recently, it didn’t work. Well, while struggling to figure out what to do, I realized I could try accessing my codepen using HTTP instead of HTTPS. Viola! It works now.

Basically a simple solution is to make sure campers share their codepen link using HTTP.

In my case my problems aren’t over, since I just moved my portfolio to a vps, and I’m serving all content through HTTPS (https://alexandroperez.com) I’m planning on having every app live in a subdomain, which will be served through HTTPS as well… I guess I’ll have to make nodejs handle the json request on the server or something similar. Though I’m new to nodejs…