CodePen is blocking Open Weather Map API

[anthkris]

Challenge Name

https://www.freecodecamp.com/challenges/show-the-local-weather

Issue Description

Show the local weather challenge recommends using Open Weather Map API. Which worked fine up until now. Now you will get an error saying "pen.js:22 Mixed Content: The page at [...] was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=30.281903699999997&lon=-97.73883819999999&appid=41bf32baf1dc0b1bb46d120a3cbdbc57'. This request has been blocked; the content must be served over HTTPS."

Browser Information

• Browser Name, Version: Google Chrome, 49.0.2623.112
• Operating System: Mac OS Yosemite
• Mobile, Desktop, or Tablet: Desktop

Your Code

// If relevant, paste all of your challenge code in here

Screenshot

[raisedadead]

@anthkris this has been fixed with #8141 .
The changes should reach the main website in a couple of days.

As a work around please open the http version of the CodePen link as in:
http://codepen.io/FreeCodeCamp/full/bELRjV

and not the https link in the challenge.

The link will be updated as soon as the fixes reach main website.

[j7an]

Even when I open the http version of the link in Chrome and Firefox, the http call to OpenWeather API is getting blocked. I've already finished my Local Weather project, but I can't submit the project like this on Codepen. The URL works fine when viewing in Safari. I could only think of submitting this project hosted on my own server or find another free weather API that supports SSL.

[raisedadead]

@j7an refer discussion on #7853

[rolandocz]

still blocked

[j7an]

@rolandocz try forecast.io as mentioned by @149203 here: #7853 (comment)

Or you can try solution here: https://forum.freecodecamp.com/t/local-weather-api-for-people-stuck-because-of-the-https-request/50274/17?u=j7an

[jurisn]

Still blocked

[risingmoon77]

https://cors-anywhere.herokuapp.com/
This worked for me if you put it in front of the initial URL
Finally :)

[prakhargvp]

@risingmoon77 Ya its working fine for me.

$.getJSON("https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+lon+"&appid=1c48b076cbce09ca93cfff52b6c839c1",function(json){
   // other code goes here
}

@raisedadead codepen is automatically redirected HTTP request to HTTPS so your method does not work.

[kennethlumalicay]

You can't do an http request from an https website. And since you have to use https to use navigation.geolocation then the best thing to do is just use an https API like darksky.

[MiloATH]

@raisedadead I think this issue can be closed due to #15598