OpenWeatherMapAPI HTTPS和javascript

我正在通过免费代码营工作，并试图使用OpenWeatherMapAPI构建一个天气应用程序，但它不起作用。我使用codepen是因为它需要在上面提交，而且它必须是https才能使用地理位置。这已经成为一个问题，因为我得到了这个错误

混合内容：通过HTTPS加载了“”处的页面，但请求了不安全的XMLHttpRequest终结点“”。此请求已被阻止；内容必须通过HTTPS提供

出于某种原因，我认为如果我将API调用更改为HTTPS，它可能会起作用，但随后我得到了这个错误

获取网络：：错误连接被拒绝

我使用了一个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 ();
}

任何帮助都将不胜感激：）

尝试使用

https://pro.openweathermap.org

endpoint

实际上，它看起来像是OpenWeatherMapSSL支持。
您必须代理您的请求，或者使用不同的服务。

尝试使用

https://pro.openweathermap.org

endpoint

实际上，它看起来像是OpenWeatherMapSSL支持。

---

你要么代理你的请求，要么使用不同的服务。

它现在起作用了，我想是因为它说的是readystate而不是readystate://

它现在起作用了，我想是因为它说的是readystate而不是readystate://

我一直处于完全相同的情况，下面是答案

这是因为，页面（

https://codepen.io

）是通过https加载的，但是请求是向非安全源发出的。（

http://openweathermap.org

）。所以基本上它不会在安全页面上提供非安全内容

你有两个选择

切换到非安全代码打开页面（

http://codepen.io/.....

）

从openweathermap.org购买专业会员资格，并将请求发送至https://... 渠道

---

我也遇到过同样的情况，下面是答案

这是因为，页面（

https://codepen.io

）是通过https加载的，但是请求是向非安全源发出的。（

http://openweathermap.org

）。所以基本上它不会在安全页面上提供非安全内容

你有两个选择

切换到非安全代码打开页面（

http://codepen.io/.....

）

从openweathermap.org购买专业会员资格，并将请求发送至https://... 渠道

---

我也面临同样的问题。我最终通过简单地使用不安全的HTTP请求而不是安全的HTTPS请求解决了这个问题。ie我将api url从

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

}

工作

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

}

---

我也面临同样的问题。我最终通过简单地使用不安全的HTTP请求而不是安全的HTTPS请求解决了这个问题。ie我将api url从

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

}

工作

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

}

---

如果必须使用HTTPS，请将以下内容附加到API的url

https://cors-anywhere.herokuapp.com/

这样它就会变成这样

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

---

使用它进行API调用，它们将被视为安全的

如果必须使用HTTPS，请将以下内容附加到API的url

https://cors-anywhere.herokuapp.com/

这样它就会变成这样

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

---

使用它进行API调用，它们将被视为安全的

当将此推送到github页面时，我也做了同样的事情，遇到了同样的问题。问题是删除http到https。

---

我使用fetch方法，因为它很灵活。在那里检查我的代码

当将此推送到github页面时，我做了同样的操作，遇到了同样的问题。问题是删除http到https。

---

我使用fetch方法，因为它很灵活。检查我的代码

这是格里姆巴哈，这是课程推荐的API。Cheerstry在常规http连接上使用codepen而不是Headit不允许我使用地理位置：/I我可以尝试找到另一种获取坐标的方法。该死。。。也许是一个不同的浏览器x.x这是一个可怕的巴哈，这是课程推荐的API。Cheerstry在常规http连接上使用codepen而不是Headit不允许我使用地理位置：/I我可以尝试找到另一种获取坐标的方法。该死。。。也许一个不同的浏览器X.XI写了一个解决方案，对此我写了一个解决方案