GET 请求不在代码笔中获取数据但在浏览器选项卡上工作

Question

This 是我很久以前做的一个简单天气应用程序的代码笔。但是，它现在不起作用。当我将 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 调用不安全。出于安全原因。他们将阻止您的请求 This request has been blocked; the content must be served over HTTPS

候补

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

Demo with Jsbin

GET 请求不在代码笔中获取数据但在浏览器选项卡上工作

GET request not getting data in codepen but working on browser tab

javascript

jquery

getjson

codepen