Javascript获取问题;没有CORS标头和HTTP状态503

Question

我正在尝试构建一个小网页来检查Politifact API中的几个条目，并且我在获取数据时遇到了麻烦。归结为essentaials，我的脚本看起来像这样：

var lastPF;
var url1 = 'http://www.politifact.com/api/v/2/statement/?order_by=- 
ruling_date&edition__edition_slug=truth-o- 
meter&ruling__ruling=Pants%20on%20Fire!&limit=1&speaker__name_slug=donald- 
trump&format=json';
fetch().then(r => r.json())
.then(data => lastPF=data)
.catch(e => console.log("Something went wrong!"))
console.log(lastPF);

然后我计划解析lastPF以找到我需要的数据点。 我遇到了两个不同的问题。 问题1：当我将该代码保存到我的机器时加载带有该代码的页面时，控制台会通知我该响应没有Access-Control-Allow-Origin标头。这让我感到困惑，因为我的理解是Fetch应该默认自动处理CORS？它还说原点是空的，这看起来也不正确。

问题2：当我尝试在线运行脚本时（如在this JSFiddle中），控制台警告我不要通过安全连接加载不安全的内容，并将其更改为＆＃34; https://(the其余的网址）＆＃34;给我HTTP状态503.我最终将托管它的地方使用HTTPS，所以为了实现这个目的，我想要以某种方式绕过混合内容警告，我想？

我知道这些可能是以前可能会提出的非常基本的问题。但是，我对JavaScript很新，所以我在解决问题时遇到了问题。