Javascript HTML/JS/JQuery/AJAX正在Atom HTML预览器上工作，但不在浏览器上工作

我正在从事一个html/js项目，该项目从API检索JSON对象。当我使用Atom html预览器时，下面的代码运行良好，但是，当我尝试使用Firefox或Chrome打开它时，JS无法正常工作。检索不到引用和作者。这是FreeCodeCamp项目的一部分

以下是JS、CSS和HTML代码：

$（文档）.ready（函数（）{
让我们引用；
让作者；
getQuote（）；
函数getQuote（）{
$.ajaxSetup（{cache:false}）；
$.ajax({
键入：“GET”，
网址：'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts\u per\u page]=1'，
成功：功能（数据）{
quote=数据[0]。内容；
作者=数据[0]。标题；
$（“#text”）.html（引号）；
$（“#author”）.html（'-'+author）；
}
});
/*$.ajaxSetup（{cache:false}）；
$.getJSON（“http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts\u per\u page]=1”，函数（a）{
quote=a[0]。内容；
作者=a[0]。标题；
$（“#text”）.html（引号）；
$（“#author”）.html（'-'+author）；
});*/
};
$（“#新报价”）。在（“单击”，函数（）{
getQuote（）；
});
$（“#tweet quote”）。在（“单击”，函数（）{
window.open（“twitter.com/intent/tweet？text=“+quote+”-“+author”）；
});
});
正文{
背景色：黑色；
颜色：白色；
}
#报价箱{
边框：2倍纯白；
填充：20px；
颜色：白色；
最大宽度：500px；
高度：自动；
保证金：自动；
}
钮扣{
利润率：20px；
边界半径：5%；
边框：2倍纯白；
背景色：黑色；
颜色：白色；
}
跨度{
宽度：自动；
高度：自动；
}

引语机器




新报价
推特引用
CORS浏览器控制台错误？这是正确的。我只是看了一下ChromeJS控制台，看到了这样的情况：跨源读取阻塞（CORB）使用MIME类型的application/json阻塞了跨源响应。有关更多详细信息，请参阅。send@jquery-1.9.1.min.js:5 ajax@jquery-1.9.1.min.js:5 getQuote@qm.js:9（匿名）@qm.js:29 dispatch@jquery-1.9.1.min.js:3 v.handle@jquery-1.9.1.min.js:3简要地提到了CORS问题（“跨源事件”），并给出了一些建议。