OpenWeatherMap API HTTPS 拒绝 javascript

Posted 2023-02-23

【中文标题】OpenWeatherMap API HTTPS 拒绝 javascript

【英文标题】：OpenWeatherMap API HTTPS refusal javascript

【发布时间】：2017-02-08 05:46:04

【问题描述】：

我正在通过免费代码营工作并尝试使用 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 可能会起作用，但随后出现此错误

GET https://api.openweathermap.org/data/2.5/weather?lat=54.757775699999996&lon=-1.6074815999999998&APPID=APIIDHEREnet::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 ();

任何帮助将不胜感激:)

【问题讨论】：

我为此写了一个解决方案here

【参考方案1】：

尝试改用https://pro.openweathermap.org 端点。

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

【讨论】：

这太糟糕了，这是课程推荐的 API。干杯

尝试在常规 http 连接上使用 codepen

如果我这样做，它不会让我使用地理位置：/ 我可以尝试找到另一种获取坐标的方法。

该死的......也许是不同的浏览器 x.x

【参考方案2】：

它现在可以工作了，我认为这是因为它说的是 readystate 而不是 readyState ：/

【参考方案3】：

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

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

你有两个选择；

切换到非安全代码笔页面 (http://codepen.io/.....) 从 openweathermap.org 购买 PRO 会员资格并将请求发送到 https://... 频道

【参考方案4】：

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

【讨论】：

如果您的网站是 HTTP，这可以工作，这有点过时了。

【参考方案5】：

如果您必须使用 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 调用，它们将被视为安全

【参考方案6】：

当我把它推送到 github 页面时，我做了同样的事情并且遇到了同样的问题。问题是将http删除到https。 我使用了 fetch 方法，因为它很灵活。检查我的代码https://github.com/bondarenko-vlad/weather-js