javascript - Fetch() 实际上并不是在获取数据

Question

我刚刚开始研究 Fetch API，但在实际使用它时遇到了一些问题。作为新手，我的第一个假设是我做错了什么。

我的第一次尝试是使用带有随机用户的无 key 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 key 更改了 URL 字符串中的“{API-KEY}”。但出于某种原因，此 API 调用未返回任何内容。

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

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

Answer 1

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

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