Reputation: 68

OpenWeatherMap API HTTPS refusal javascript

I'm working through free code camp and trying to build a weather app using OpenWeatherMap API but It's not working. I'm using codepen because that's what it needs to be submitted on and it has to be a https to use geo location. This has become a problem because I get this error.

Mixed Content: The page at 'https://s.codepen.io/boomerang/8658fc75197c1c3799d7eb446c1be54c1475174843341/index.html?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=54.757753799999996&lon=-1.6074879&APPID=APIIDHERE'. This request has been blocked; the content must be served over HTTPS.

For some reason I thought it might work if I change the API call to HTTPS but then I get this error

GET https://api.openweathermap.org/data/2.5/weather?lat=54.757775699999996&lon=-1.6074815999999998&APPID=APIIDHERE net::ERR_CONNECTION_REFUSED

I have used an api key but i've just hidden it on here.

I've tried a few different ways of fixing it i've seen on other posts but nothing has worked so far :/

I'm using this code 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 help would be appreciated :)

Upvotes: 0

Answers (6)

Vlad Bondarenko

Reputation: 1

I did same and had same problem, when push this to github pages. Problem is removing http to https. I used fetch method, because it is flexible. Check my code there https://github.com/bondarenko-vlad/weather-js

Upvotes: 0

Pila

Reputation: 5862

If you must make use of HTTPS, append the following to the url of the API https://cors-anywhere.herokuapp.com/ so that it becomes something like this...

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/forecast/daily?q=Bamenda&appid=****myid

use that to make your API calls and they will be treated as secured

Upvotes: 2

Pila

Reputation: 5862

I faced this same issue. I finally solved it by simply using the unsecured HTTP request, instead of the secured, HTTPS request. ie I changed the api url from https://api.openweathermap.org/... to http://api.openweathermap.org/...

Here is the supporting code:

NOT WORKING

function fetchWeatherInfo(){
     $.ajax({
            type: 'GET',
            url: 'https://api.openweathermap.org/data/2.5/forecast/daily?q=Bamenda&appid=****myid',
            success: function(response) {
                console.log(response);
            },
            error: function(xhr, status, error) {},
            cache: false
        });

}

WORKING

function fetchWeatherInfo(){
     $.ajax({
            type: 'GET',
            url: 'http://api.openweathermap.org/data/2.5/forecast/daily?q=Bamenda&appid=****myid',
            success: function(response) {
                console.log(response);
            },
            error: function(xhr, status, error) {},
            cache: false
        });

}

Upvotes: -1

Оzgur

Reputation: 432

I have been in exact same situation and here is the answer.

It is because, the page (https://codepen.io) is loaded over https, however the request been made to a non-secure source. (http://openweathermap.org). So basically it won't serve a non-secure content on a secure page.

You have 2 options;