Local Weather API - for people stuck because of the HTTPS request

Code Feedback
1

Well, there is a problem :

If I want to use the navigator.geolocation to obtain the user coords, I need to change the url of the codePen from HTTP to HTTPS.

HOWEVER…

If I put HTTPS on my codePen url… I cannot use anymore the Openweather Map API, because HTTPS request belong to Premium Account …

Any idea how can I solve this without changing my Openweather API ?
Thanks a lot !!

http://codepen.io/steffanek/pen/amgLag?editors=1011

2 Likes
2

Add https://crossorigin.me/ before the api url: https://crossorigin.me/http://openweathermap.org/api

7 Likes
3

Add https://crossorigin.me/ to the var api:

var api = "https://crossorigin.me/http://api.openweathermap.org...

EDIT:
Slow pony :expressionless:

3 Likes
4

So the cross origin is to skip over and force the OpenWeather Map API to use another HTTPS request ? is that correct ? :slight_smile:

5

crossorigin uses https, but will request the http version of openweathermap. Chrome wants everything secure (https), but it doesn’t matter if crossorigin (on their side) use http.

6

Ok, I got it. The problem continue…

https://codepen.io/steffanek/pen/amgLag?editors=1011

  1. I have my current location : lat + long because I have my https request https://codepen url…
  2. I wanna concatenate this coords with my API so I change my url API and its working when I console log because its grab my current lat and long.
    But another problem in my console appear : so the aleart dont work.

XMLHttpRequest cannot load https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?%20%2…t=52.254697099999994&lon=20.9886031&appid=ba7df19993124c71c649b28937220639. 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 502.

7

I am afraid crossorigin.me is down, which it is quite often…

8

OK so I should use another API for Geolocation which is a HTTP request so I can still work on HTTP CodePen and HTTP OpenWeatherMap :slight_smile:

9

Crossorigin is live. Codepen is messing things up again. You have a few spaces in the link: var api = "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather? lat="+lat+"&lon="+long+"&appid=ba7df19993124c71c649b28937220639";. Right between weather? and lat.

It is impossible to see this (at least for my screen size) thanks to Codepen continuing on a new line.

2 Likes
10

Anyway, to sum up if someone have the same problem as me. There is 2 methods !

  1. You wanna use the navigator.geolocation function directly :
    Guys If you using Google Chrome when you calling your browser by using the navigator.geolocation you have to have an HTTPS request so you have to turn codpen from HTTP://codepen… to HTTPS://codpen…
    And if you use HTTPS for codepen you will need to use it for the url weather API.
    For that add :
    Add https://crossorigin.me/ to the var api:
    so you have this.
    var api = "https://crossorigin.me/http://api.openweathermap.org...

  2. if you dont wanna change this stuff and stay on HTTP request (without the “s”)
    Stay on HTTP://codepen
    Stay on HTTP:// your weather api url

Add a Geolocation API from outside to grab your coords you can use :
http://ip-api.com/docs/api:json

Cheers!

PS: and dont forget to check your Console in your browser, its very useful actually :smiley:

5 Likes
11

Thanks, I was stuck in the same problem.

12

Hey. Thanks. But it seems that this solution does not work anymore.

13

I believe crossorigin.me totally stopped working. You can use https://cors-anywhere.herokuapp.com instead.

11 Likes
14

Thanks. I figured out that using a different proxy might work & have tried with this proxy also. But no luck! I think, I will have to settle with apixu web service.

1 Like
15

crossorigin.me doesn’t work for me also :frowning:

16

thanks. i was stuck and hitting my head all over the place. staying with just the http resolved but for how long?

17

Using var api = 'https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat=… works. Thanks!

Is there a way to cure this problem in the long run, or should we maybe change the API we use, and maybe even change the suggested API (openweathermap) in the challenge description itself? It is pretty discouraging for anyone who tries the challenge and doesn’t know that much about protocols, tricks and gotchas.

EDIT: After trying more weather APIs than I can count my fingers, I’ve come to a conclusion that openweathermap is a good first choice for this challenge/project after all. There are free APIs out there with https support, even with much better documentation and you should surely check them out, but I’ve had some serious troubles getting the right response for my coordinates, a lot of servers were just sending me the wrong info on each request.

Good luck to everyone who is doing this project, and keep on trying, you will learn A LOT from it!

2 Likes
18

I ran into the same problem, but found the following alternate weather service.

It’s free for low numbers of requests per month and is available over HTTPS. https://www.apixu.com/pricing.aspx

I have confirmed that it works over HTTPS and using CORS (no interface yet)
My APIXU weather api implementation

1 Like
19

Thanks man! https://cors-anywhere.herokuapp.com/ did eventually work out for me after a couple of hours of frustration.

20

Hello!

I have used “https://cors-anywhere.herokuapp.com” in my project and had no luck :confused:

This is my pen:

Help is greatly appreciated!
Thanks.