API works on insecure but not secure - json

Question

So im running through a Freecodecamp challenge and this seems to be a common thing.
requesting Json from unsecure host openweathermap.org
On my domain http:// I can now get it to work but at https:// it will not (also codepen).
I found a few workarounds but none worked.
Any help would be great.
http://codepen.io/Middi/pen/peLMBQ
function weather() {
// Get Location
$.getJSON('http://ip-api.com/json', function (response) {
var city = response.city;
var country = response.country;
displayWeather(city, country);
});
// Make API URL
function displayWeather(city, country) {
var weatherAPI = "http://api.openweathermap.org/data/2.5/weather?q=";
var API_Key = "&APPID=1f3e30098d59daa0ee84d36dca533728";
var full_API_Link = weatherAPI + city + units + API_Key;
$.getJSON(full_API_Link, function (response) {
// Interpret data
var temp_c = Math.round(response.main.temp);
var description = response.weather[0].description;
var icon = response.weather[0].icon;
//Switch Icons and send to DOM
replace(icon, city, country, temp_c, endUnit, description);
});
}
}

Answer 1

Due to browser security policy, you cannot load insecure resource (HTTP) in secure page (HTTPS) via Ajax request.
There is one workaround: make a forward layer in your backend. The steps would be:
When you want to load data from http://ip-api.com/json or http://api.openweathermap.org, send Ajax request to your own backend API, via HTTPS.
In backend, accept the previous HTTPS request, parse the parameter, and send real HTTP request to ip-api.com or api.openweathermap.org. Return the data to browser after it is retrieved.
In browser, get the data and do corresponding operation.
In codepen, as the page is loaded via HTTP, your Ajax code works well. The request/response can be observed in debug window.