OpenWeatherMap API HTTPS拒否javascript

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経由でコンテンツを配信する必要があります。私はHTTPSへのAPI呼び出しを変更した場合、それがうまくいくかもしれないと思ったいくつかの理由

が、その後、私はこのエラーを取得する

はhttps://api.openweathermap.org/data/2.5/weather?lat=54.757775699999996&lon=-1.6074815999999998&APPID=APIIDHEREネット:: ERR_CONNECTION_REFUSED

私が使用しているのGET 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のは言ったので、それがあったと思います。

これは、ページ（https://codepen.io）がhttps経由で読み込まれているためです。ただし、要求は非セキュアソースに行われています。 （http://openweathermap.org）。したがって、基本的には、セキュリティで保護されていないコンテンツを安全なページに表示することはできません。

2つのオプションがあります。非セキュアcodepenページへ

1. スイッチ（http://codepen.io/.....）
2. 購入PRO会員openweathermap.orgからとhttpsにリクエストを送信：// ...チャンネル

Answer 3

私はここに正確に同じような状況にあったとしている答えです：

Answer 4

を私はこの同じ問題に直面していました。セキュリティで保護されたHTTPSリクエストではなく、単にセキュリティで保護されていないHTTPリクエストを使用するだけで解決しました。あなたが利用する必要がある場合

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

作業

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

} 

を働いていない：つまり私は、サポートコードがされる。ここ

https://api.openweathermap.org/...からhttp://api.openweathermap.org/...へのAPIのURLを変更しましたHTTPSの場合は、AのURLに次の行を追加しますPI https://cors-anywhere.herokuapp.com/それはこのようなものになるように...

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

あなたのAPI呼び出しを行うために使用し、それらが確保