Question

所以即时通过Freecodecamp挑战，这似乎是一件很常见的事情。

从不安全的主机openweathermap.org请求Json

在我的域名http：//我现在可以使用它，但是在https：//它不会（也是代码集）。

我找到了一些解决方法但没有工作。

任何帮助都会很棒。

function weather() {

  // Get Location
  $.getJSON('http://ip-api.com/json', function (response) {
    var city = response.city;
    var country = response.country;
    displayWeather(city, country);
  });

  // Make API URL
  function displayWeather(city, country) {
    var weatherAPI = "http://api.openweathermap.org/data/2.5/weather?q=";
    var API_Key = "&APPID=1f3e30098d59daa0ee84d36dca533728";
    var full_API_Link = weatherAPI + city + units + API_Key;  

    $.getJSON(full_API_Link, function (response) {

      // Interpret data 
      var temp_c = Math.round(response.main.temp);
      var description = response.weather[0].description;
      var icon = response.weather[0].icon;

      //Switch Icons and send to DOM
      replace(icon, city, country, temp_c, endUnit, description);
    });
  }
 }

Answer 1

由于浏览器安全策略，您无法通过Ajax请求在安全页面（HTTPS）中加载不安全资源（HTTP）。

有一种解决方法：在后端制作前向层。步骤将是：

如果要从http://ip-api.com/json或http://api.openweathermap.org加载数据，请通过HTTPS将Ajax请求发送到您自己的后端API。
在后端，接受先前的HTTPS请求，解析参数，并向ip-api.com或api.openweathermap.org发送实际HTTP请求。检索后将数据返回浏览器。
在浏览器中，获取数据并进行相应的操作。

在codepen中，当页面通过HTTP加载时，您的Ajax代码运行良好。可以在调试窗口中观察请求/响应。

API在不安全但不安全的情况下工作

1 个答案: