加载自定义字体时出现CORS错误

我试图在我的主题组件中使用一种特殊字体。我已经按照这篇帖子中的说明操作:

这是我组件中的 CSS:

@font-face {
  font-family: 'northwood';
  font-style: regular;
  src: url($northwoodhigh) format('woff2');
}

.category-list tbody .category h3 a[href] {
	color: #ccc;
	font-family: 'northwood', cursive;
	font-size: 135%;
	word-spacing: 3px;
}

我已将我的 Cloudfront URL 添加到 CORS 设置中,如下所示:

但不起作用——不幸的是,当我加载包含该 CSS 的页面时,控制台会出现“跨域请求被阻止”错误:

7d26013f5bcde40cc8778378940e1e53_Image 2020-04-25 at 6.38.04 PM

(抱歉图片非常小。)有人有什么建议吗?我卡住了。

您是否在 app.yml 中设置了 DISCOURSE_ENABLE_CORS,正如描述中建议的那样?

不确定——有办法检查吗?(我使用的是托管版的 Discourse,无法直接查看配置文件。)

编辑:我已联系我们的托管服务商,看看是否是这个问题。

更新:我的托管提供商确认 DISCOURSE_ENABLE_CORS 已设置为 TRUE

所以,我仍然感到困惑。

我刚刚按照你描述的方法,在一个已配置 CDN 的网站进行了测试,结果是成功的。因此,我认为这个问题可能仅限于你的网站。

我认为 DISCOURSE_ENABLE_CORS 设置的含义与你期望的相反。在该设置中添加域名,是允许来自这些域名的请求访问你的 Discourse 域名,而不是反过来。

你真正需要的是允许来自你的 Discourse 域名的请求访问 CDN 上的文件。我认为你的 CDN 正在阻止这些请求。你可以通过在终端中运行类似以下的命令来确认(当然,在修改相关值之后):

curl -H "origin: YOUR_SITE_URL" -v "PATH_TO_THE_FONT_ON_YOUR_CDN"

如果一切设置正确,你应该会在响应头中看到类似以下内容:

Access-Control-Allow-Origin: *