I'm currently working on a project with free code camp where I am attempting to create a weather app using the OpenWeatherMap API. However, I have encountered an issue. My project needs to be submitted on Codepen and use HTTPS for geolocation. Due to this requirement, I am facing difficulties as I receive the following error message:
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.
In an attempt to resolve the issue, I modified the API call to HTTPS, but now I encounter a new error:
GET net::ERR_CONNECTION_REFUSED
I have used an API key, which I have hidden here for security purposes.
Despite trying various solutions posted in other discussions, I have not been able to fix the issue so far.
This is the code snippet that I am using for the request:
function updateLoc (lat, long) {
var url = "https://api.openweathermap.org/data/2.5/weather?" +
"lat=" + lat +
"&lon=" + long +
"&APPID=" + APPID;
sendRequest (url);
}
function sendRequest (url) {
var xmlhttp = new XMLHttpRequest ();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
var data = JSON.parse (xmlhttp.responseText);
var weather = {};
weather.icon = data.weather.icon;
weather.dir = data.wind.deg;
weather.wind = data.wind.speed;
weather.temp = data.main.temp;
weather.loc = data.name;
weather.hum = data.main.humidity;
update (weather);
}
};
xmlhttp.open ("GET", url, true);
xmlhttp.send ();
}
Any assistance or guidance on resolving this issue would be greatly appreciated! :)