在尝试在JSFIDDLE中获取资源时的NetworkError

Question

我正在为网页制作自动完成功能，用户可以通过输入城市/机场名称的首字母来查找有关城市及其机场的信息。我使用 javascript fetch 从 API 接收所有活动机场：

let airports; 

fetch("http://api.travelpayouts.com/data/ru/airports.json")
    .then(data => data.json())
    .then(data => airports = JSON.parse(data))
    .catch(error => console.log(error.message));

它在本地工作，但在 jsfiddle.net 的情况下，我收到错误：

尝试获取资源时出现网络错误。

我用 google 搜索了该问题，但只能找到这种行为的原因并且没有解决方案，所以我最终只是将响应正文硬编码到小提琴中。有什么方法可以正确修复吗？

Answer 1

如果您检查浏览器控制台，您会发现以下内容：

混合内容：“https://jsfiddle.net/”页面是通过 HTTPS 加载的，但请求了不安全的资源“http://api.travelpayouts.com/data” /ru/airports.json'。该请求已被阻止；内容必须通过 HTTPS 提供。

您无法从通过 HTTPS 加载的站点向不安全的资源 (http) 发出请求。

开发过程中的一种解决方法是通过允许不安全的内容来更改浏览器上的站点设置。