Freecodecamp: CodePen is blocking Open Weather Map API

Created on 20 Apr 2016 · 10Comments · Source: freeCodeCamp/freeCodeCamp

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

help wanted projects-frontend bug

Source

anthkris

Most helpful comment

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

risingmoon77 on 10 Jun 2017

👍7 🎉1 😄1

All 10 comments

@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.

raisedadead on 20 Apr 2016

👍5

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.

j7an on 16 May 2016

@j7an refer discussion on #7853

raisedadead on 16 May 2016

still blocked

rolandocz on 24 May 2017

@rolandocz try forecast.io as mentioned by @149203 here: https://github.com/freeCodeCamp/freeCodeCamp/issues/7853#issuecomment-222315358

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

j7an on 26 May 2017

👍1

Still blocked

jurisn on 29 May 2017

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

risingmoon77 on 10 Jun 2017

👍7 🎉1 😄1

@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.

prakhargvp on 11 Jun 2017

👍3

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.