GET请求不在codepen中获取数据，而是在浏览器选项卡上工作

Question

This是我很久以前做过的简单天气应用程序的Codepen。但是，它现在不起作用。当我将api粘贴到浏览器标签中时，我正在获取数据，但在Codepen中它无效。

var api = "http://api.openweathermap.org/data/2.5/weather?
q=Lam%20Tin,HK&appid=23a5271ef6a94716ac17ec27e9f4bcd8";
$.getJSON(api, function(data) {
  console.log(data);
});

Answer 1

错误

The page at 'https://codepen.io/iamanoopc/pen/JEjYKR?editors=0011' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?q=Lam%20Tin,‌​HK&appid=23a5271ef6a‌​94716ac17ec27e9f4bcd‌​8'. This request has been blocked; the content must be served over HTTPS.

解释

错误已经非常明确地显示。 HTTPS, but requested an insecure XMLHttpRequest 。是安全域服务器https。您的http调用是不安全的。出于安全原因。他们会阻止您的请求< EM> This request has been blocked; the content must be served over HTTPS

替代

尝试使用不安全的http域服务器代码段，例如jsbin

Demo与Jsbin