为什么我们在预加载字体文件时需要“crossorigin”属性？答案

【问题标题】：Why do we need the "crossorigin" attribute when preloading font files?为什么我们在预加载字体文件时需要“crossorigin”属性？
【发布时间】：2022-01-27 20:16:14
【问题描述】：

为了正确预加载字体文件，我们被告知我们总是需要将crossorigin 属性应用于我们的<link rel="preload" /> 标签，例如：

<link rel="preload" href="fonts/comicsans.woff2" as="font" type="font/woff2" crossorigin>

谁能告诉我这个的真正原因？我能找到的只是 MDN 中的链接，这些链接只是规定了这个要求，而没有详细说明原因：

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches

当预加载启用 CORS 获取的资源（例如 fetch()、XMLHttpRequest 或字体）时，需要特别注意设置元素的 crossorigin 属性。该属性需要设置为匹配资源的 CORS 和凭据模式，即使获取不是跨域的。

如上所述，字体文件是一个有趣的应用案例。 由于各种原因，必须使用匿名模式 CORS 来获取这些内容（请参阅字体获取要求）。

这似乎违反了我对 CORS 的理解，以及为什么它是必要的。我确定这是有充分理由的，只是找不到。

在任何人只链接到我正在谈论的相同文档之前，请参见下文：

https://drafts.csswg.org/css-fonts/#font-fetching-requirements

我真的很想得到真正了解为什么这是一项要求及其目的是什么的人的深入回答，并提供一些证据（文档等）来支持它。

【问题讨论】：

这也让我感到困惑。当字体文件位于另一个服务器/域上但预加载自托管字体文件时，Crossorigin 被认为是必要的。

标签： html fonts cors preload

【解决方案1】：

HTML 属性crossorigin 定义了如何处理跨域请求。设置crossorigin 属性（相当于crossorigin="anonymous"）将使用same-origin 策略将请求切换为CORS 请求。 rel="preload" 需要它，因为字体请求需要 same-origin 策略。

几乎所有新的资源类型都需要同源策略，例如fetch()、<script type="module"> 或字体。由于向后兼容问题，它不适用于遗留资源类型（图像、脚本、css、视频、音频）。 <link rel="preload"> 是一个特例，因为它是一个需要支持旧资源类型的现代功能，例如预加载图像。

理想情况是，从现在开始，您总是引入一种新的链接类型。这样做是对的，因为它让我们不必关心整个烦人的课程的安全问题。 Source

该要求随后被添加到 CSS 字体的 W3C 草案中。

对于字体加载，用户代理必须对@font-face 规则中定义的 URL 使用 [FETCH] 规范定义的可能启用 CORS 的提取方法。获取时，用户代理必须使用“匿名”模式，将引用源设置为样式表的 URL，并将源设置为包含文档的 URL。 Source

我也多次遇到字体代工厂要求防止字体盗版的情况，但我无法用证据证实这一点。

其他相关链接：

【讨论】：

感谢您的详细回复/解释！很有用
这是否意味着服务器必须返回 CORS 标头，即使请求来自同一来源？这没有任何意义，但似乎是预加载字体的情况。
如果字体托管在不同的来源（如 Google 字体），则它们需要包含 Access-Control-Allow-Origin 标头，但如果它们位于同一来源，则不需要。命名错误的 crossorigin 属性将 CORS 策略设置为 same-origin。