Question

我正在通过免费代码阵营并尝试使用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 ();
}

任何帮助将不胜感激：）

Answer 1

~~请尝试使用https://pro.openweathermap.org端点。~~

实际上，似乎OpenWeatherMap SSL支持isn't free 您必须代理您的请求，或使用不同的服务。

Answer 2

它现在正在工作我认为这是因为它说readystate而不是readyState：/

Answer 3

我的情况完全相同，这就是答案。

这是因为，页面（https://codepen.io）是通过https加载的，但请求是针对非安全源的。（http://openweathermap.org）。所以基本上它不会在安全页面上提供非安全内容。

您有2个选项;

切换到非安全的codepen页面（http://codepen.io/.....）
从openweathermap.org购买PRO会员资格并将请求发送至https：// ... channel

Answer 4

我遇到了同样的问题。我最后通过简单地使用不安全的HTTP请求而不是安全的HTTPS请求来解决它。即我将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
        });

}

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

}

Answer 5

如果您必须使用HTTPS，请将以下内容附加到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调用，它们将被视为安全

Answer 6

当将其推送到github页面时，我做过同样的问题。问题是将http删除为https。我使用了提取方法，因为它很灵活。在此处检查我的代码https://github.com/bondarenko-vlad/weather-js

OpenWeatherMap API HTTPS拒绝javascript

6 个答案: