Fetch（）实际上并不提取数据

Question

我刚刚开始研究Fetch API，但实际上我遇到了一些麻烦。作为新手，我的第一个假设是我做错了什么。

我的第一次尝试是使用随机用户的无密钥API，这非常有用：

fetch("https://randomuser.me/api/").then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

然后，我继续使用Wunderground Weather的一个键控API，它没有那么顺利：

fetch("http://api.wunderground.com/api/{API-KEY}/conditions/q/CA/San_Francisco.json").then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

在您提问之前，我使用实际的API密钥更改了URL字符串中的“{API-KEY}”。但由于某种原因，此API调用没有返回任何内容。

API URL直接从Wunderground API文档here进行复制/粘贴，如果粘贴到Chrome的地址栏中，则会成功返回JSON。

Here是我正在使用的codepen.io（没有API-KEY）。

Answer 1

使用https://作为wunderground url将阻止浏览器阻止混合内容。

见https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default