OpenWeatherMap API HTTPS отказ javascript

Я работаю в лагере бесплатного кода и пытаюсь создать приложение погоды с использованием OpenWeatherMap API, но оно не работает. Я использую codepen, потому что это то, что нужно отправить, и это должен быть https, чтобы использовать геолокацию. Это стало проблемой, потому что я получаю эту ошибку.

Смешанный контент: страница по адресу 'https://s.codepen.io/boomerang/8658fc75197c1c3799d7eb446c1be54c1475174843341/index.html?editors=0010' был загружен через HTTPS, но запросил небезопасную конечную точку XMLHttpRequest 'http://api.openweathermap.org/data/2.5/weather?lat=54.757753799999996&lon=-1.6074879&APPID=APIIDHERE'. Этот запрос был заблокирован; контент должен передаваться через HTTPS.

По какой-то причине я подумал, что это может сработать, если я изменю вызов API на HTTPS, но потом получаю эту ошибку

ПОЛУЧИТЬ https://api.openweathermap.org/data/2.5/weather?lat=54.757775699999996&lon=-1.6074815999999998&APPID=APIIDHERE net::ERR_CONNECTION_REFUSED

Я использовал ключ API, но просто спрятал его здесь.

Я пробовал несколько разных способов исправить это, которые я видел в других сообщениях, но пока ничего не сработало:/

Я использую этот код для запроса

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

Любая помощь будет оценена по достоинству :)


javascript api openweathermap
person Danny Pearson    schedule 29.09.2016    source источник
comment
Я написал решение для этого здесь   -  person Pila    schedule 04.07.2017

Ответы (6)


arrow_upward
2
arrow_downward

Попробуйте вместо этого использовать конечную точку https://pro.openweathermap.org.

На самом деле, похоже, что поддержка OpenWeatherMap SSL не бесплатна.
Вы должны либо проксировать свои запросы, или использовать разные сервисы.

person lauriys    schedule 29.09.2016
comment
Это мрачная баха, это API, рекомендованный курсом. Ваше здоровье - person Danny Pearson; 29.09.2016
comment
вместо этого попробуйте использовать codepen для обычного http-соединения - person lauriys; 29.09.2016
comment
Это не позволяет мне использовать геолокацию, если я это сделаю: / Я мог бы попытаться найти другой способ получения координат. - person Danny Pearson; 29.09.2016
comment
блин... может другой браузер х.х - person lauriys; 29.09.2016

arrow_upward
1
arrow_downward

Если вы должны использовать HTTPS, добавьте следующее к URL-адресу API https://cors-anywhere.herokuapp.com/, чтобы он стал примерно таким...

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

используйте это, чтобы совершать вызовы API, и они будут рассматриваться как защищенные

person Pila    schedule 10.07.2017

arrow_upward
0
arrow_downward

Теперь он работает, я думаю, это потому, что он сказал readystate вместо readyState :/

person Danny Pearson    schedule 29.09.2016

arrow_upward
0
arrow_downward

Я был в точно такой же ситуации, и вот ответ.

Это связано с тем, что страница (https://codepen.io) загружается через https, однако запрос был сделан к незащищенному источнику. (http://openweathermap.org). Таким образом, в основном он не будет обслуживать незащищенный контент на защищенной странице.

У вас есть 2 варианта;

  1. Переключиться на незащищенную страницу codepen (http://codepen.io/.....)
  2. Купите членство PRO на openweathermap.org и отправляйте запросы на канал https://...
person Оzgur    schedule 02.05.2017

arrow_upward
0
arrow_downward

Я столкнулся с этой же проблемой. В конце концов я решил эту проблему, просто используя незащищенный HTTP-запрос вместо защищенного HTTPS-запроса. т.е. я изменил URL-адрес API с https://api.openweathermap.org/... на http://api.openweathermap.org/...

Вот вспомогательный код:

НЕ РАБОТАЕТ

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

}

РАБОТАЕТ

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

}
person Pila    schedule 04.07.2017

arrow_upward
0
arrow_downward

Я сделал то же самое, и у меня была такая же проблема, когда я отправил это на страницы github. Проблема в переносе http на https. Я использовал метод выборки, потому что он гибкий. Проверьте мой код здесь https://github.com/bondarenko-vlad/weather-js

person Vlad Bondarenko    schedule 08.12.2020