OpenWeatherMap API HTTPS refusal javascript

Question

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 :)

I wrote a solution to this [here](https://stackoverflow.com/questions/38659464/jquery-ajax-call-with-openweathermap-neterr-connection-refused/44900102#44900102) — Pila, Jul 04 '17 at 07:55

score 3 · Accepted Answer · answered Sep 29 '16 at 19:20

3

~~Try using the https://pro.openweathermap.org endpoint instead.~~

Actually, it seems like the OpenWeatherMap SSL support isn't free.
You have to either proxy your requests, or use different services.

answered Sep 29 '16 at 19:20

lauriys

4,652
7
32
40

That's grim baha, it's the API the course recommends. Cheers – Danny Pearson Sep 29 '16 at 19:26
try using codepen on a regular http connection instead – lauriys Sep 29 '16 at 19:28
It doesn't let me use geo location if I do :/ I could try and find another way of getting coordinates. – Danny Pearson Sep 29 '16 at 19:29
damn... maybe a different browser x.x – lauriys Sep 29 '16 at 19:31

score 2 · Answer 2 · answered Jul 10 '17 at 16:28

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

score 0 · Answer 3 · answered Sep 29 '16 at 22:21

0

It's working now I think it was because it said readystate instead of readyState :/

answered Sep 29 '16 at 22:21

Danny Pearson

68
1
10

score 0 · Answer 4 · answered May 02 '17 at 09:47

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;

Switch to non-secure codepen page (http://codepen.io/.....)
Buy PRO membership from openweathermap.org and send requests to https://... channel

score 0 · Answer 5 · answered Dec 08 '20 at 22:01

0

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

answered Dec 08 '20 at 22:01

Vlad Bondarenko

1

Pila · Answer 6 · 2017-07-04T07:59:52.387

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
        });

}

This works if your site is HTTP, which is kinda obsolete. – doublejosh Jan 27 '22 at 01:30 — doublejosh, Jan 27 '22 at 01:30
Not working in my case. Both http and https giving me cors. – ZIS Jul 19 '22 at 08:13 — ZIS, Jul 19 '22 at 08:13

OpenWeatherMap API HTTPS refusal javascript

6 Answers6

Linked