我想在我的站点上包含一些预连接资源提示，以便浏览器可以（例如）在实际看到调用CDN的脚本标记之前连接到jQuery CDN。我不确定是否应包含“ crossorigin”属性或该属性的值。该规范指出，部分

要启动预连接，用户代理必须运行以下步骤：

[…]

3. 令corsAttributeState为元素的crossorigincontent属性的当前状态。
4. 将凭证设为设置为的布尔值true。
5. 如果corsAttributeState为Anonymous并且origin不等于当前Document的原点，请将凭据设置为false。
6. 尝试与来源和凭据建立联系。

我不知道如何解释该算法。如果我要预连接CDN，这将使任何人都可以下载CDN的内容而没有任何种类的凭证，那么“ crossorigin”属性应使用什么值？

我在寻找同一件事，发现了这个

它在此处指出，如果您不使用跨源属性，则用户代理仅进行dns查找，但不会与特定域建立连接。因此，如果必须预先连接到跨域，则需要crossorigin属性，如下所示：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

另外，如果您想向该特定跨域发送一些凭据，则可以将值设置为crossorigin，crossorigin = use-credentials否则我认为默认值为匿名。

到目前为止，我理解的使用crossorigin，特别是在其价值观方面anonymous和use-credentials，你应该使用crossorigin="use-credentials"的情况下：

• 您使用具有跨域属性的资产（例如图像或视频）
• 您计划根据用户代理之前与原点的交互，在原点之间携带cookie，HTTP身份验证和客户端SSL证书。

此外，对于文档引用了你，我得到了这个和那个。但是确实该文档具有误导性并且包含拼写错误：第一个调用它use-credentials，第二个调用它user-credentials。

无论如何，以我的理解：

• 不crossorigin等于crossorigin="anonymous"
• crossorigin 等于 crossorigin="use-credentials"

也许有人会纠正我。

PS：主题的当前版本的Mozilla页面表示：

无效的关键字和空字符串将作为匿名关键字处理。

意思是：完全没有crossorigin，crossorigin或crossorigin="use_credentials"全部视为crossorigin="anonymous"。

这取决于两件事：

1. 要下载的资产类型（确定是否使用CORS）
2. 目标服务器是否对CORS连接使用凭据

对于jQuery，您不会使用crossorigin。脚本不属于浏览器使用CORS下载的资源类型。

另一方面，字体使用CORS。

• 如果页面仅获取使用CORS的资源，请包含该crossorigin属性。
• 如果页面仅获取不使用CORS的资源，请省略crossorigin。如果
• 如果页面将获取这两种资源的，你可能需要两个资源的暗示。（完全公开，链接到我的个人网站。:-)）有人指出，HTTP / 2可能不需要两个提示。我还没时间测试。

这是我遇到相同问题的Stack Overflow帖子。

当需要CORS凭证时，我还没有深入探讨。我还没有看到需要它们的示例，因此您很可能会放心使用crossorigin（例如，“ crossorigin =“ anonymous”）。

到目前为止，所有答案似乎都是简化的，不完整的或部分错误的（主题很复杂，事物的名称令人迷惑并且没有充分记录！），所以这是我的理解：

为了能够重用由创建的连接<link rel=preconnect>，取决于您要从何处获取哪种类型的内容，请求是否将发送浏览器凭据（可以由浏览器显式或隐式地建立）：

请求的来源相同（example.com请求来自的子资源example.com）

首先根本不需要preconnect。在加载页面一段时间后，浏览器使连接保持打开状态。如果要打开多个连接，浏览器将自行决定是否打开以及打开多少（取决于服务器是否在TLS握手，浏览器设置等中宣布HTTP / 2支持）。

要检查：如果同源请求具有crossorigin属性：该属性是已使用还是被忽略？

该请求是跨源的（example.com请求来自的子资源another.com）

• 如果实际的请求具有在HTML中显式设置的crossorigin属性（在JS中，这很重要），则预连接也必须具有相同的值（也许在没有意义且被忽略的情况下除外）-对于我呢crossOrigincrossorigin
• 否则，如果要求如果<script type=module>：进行检查
• 否则，如果请求和“老派”的要求<img>，<style type=stylesheet>，<iframe>，经典<script>等（通过HTML或JS启动）， 没有crossorigin明确指定，那么PRECONNECT不能有crossorigin属性集。
• 否则，如果请求是跨域字体请求，则预连接必须具有crossorigin=anonymous
• 否则，如果请求是跨域的 fetch或XHR：
  • 如果它是在凭证模式下完成的（即，附加了cookie或使用了HTTP基本身份验证；对于fetch，这意味着credentials !== omit；对于XHR ：）withCredentials === true：预连接必须具有crossorigin=use-credentials
  • 如果它不在凭据模式下：预连接必须具有 crossorigin=anonymous

对于最后一种情况（fetch / XHR），请转到Chrome / Firefox devtools中的网络面板，右键单击请求，然后copy as fetch从下拉菜单中选择。这将创建一个JS代码段，该代码段将告诉您该请求是否启用了CORS（"mode"=="cors"）和凭据（"credentials"=="include"|"same-origin"）。

但是请注意，上述技巧不适用于非XHR /获取请求，因为如前所述，例如fetch，<img>使用不同的算法来建立连接。

最后，在HTML中，<link ...crossorigin>=== <link ...crossorigin=anonymous>。

其他说明和链接：

• 在Firefox中，即使应该这样做，预连接也不起作用
• 三种方法检查预连接是否正常工作
• 浏览器对可以发生多少个并行DNS请求有一些限制
• 在WebPageTest上使用自定义脚本注入进行预连接实验