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


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

[…]


让corsAttributeState为元素的crossorigin内容属性的当前状态。
让凭据为设置为true的布尔值。
如果corsAttributeState为Anonymous且origin不等于当前Document的原点，将凭据设置为false。
尝试获取与来源和凭据的连接。



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

评论

相关：stackoverflow.com/questions/55520102/…

#1 楼

我在搜索相同的内容，发现了这个问题

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

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


此外，如果要将一些凭据发送到该特定的跨域，则可以设置要交叉赋值为crossorigin = use-credentials的值，否则我认为默认值为匿名。

评论

这是半正确的。如果使用CORS（与字体一样），则仅DNS查找将与字体请求一起使用。 （该连接仍然发生，但未在瀑布图中显示，因为必须为CORS请求打开一个单独的连接。）如果要获取脚本，则使用交叉源同样会浪费连接，因为必须打开一个新连接不使用CORS。

– Michael Crenshaw
19年4月30日在20:28

#2 楼

到目前为止，我了解crossorigin的用法，尤其是就其值anonymous和use-credentials而言，在以下情况下应使用crossorigin="use-credentials"：


您使用资产，例如图像或视频， crossorigin属性
，您计划根据用户代理以前与源的交互，在源之间携带cookie，HTTP身份验证和客户端SSL证书。

此外，您引用的文档中我知道这个。但是确实该文档具有误导性并且包含拼写错误：第一个称为use-credentials，第二个称为user-credentials。无论如何，据我了解：


否crossorigin全部等于crossorigin="anonymous"


crossorigin等于crossorigin="use-credentials"


也许有人会纠正我。

PS：当前版本在主题的Mozilla页面中：


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


方法：否crossorigin完全将crossorigin或crossorigin="use_credentials"处理为crossorigin="anonymous"。

评论

我相信，正如MDN中提到的那样，默认情况下（即未指定属性时），根本不使用CORS。同样，仅设置crossorigin等于crossorigin =“ anonymous”。

–莎士比亚
19-3-22在13:23


#3 楼

它取决于两件事：


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

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

字体则使用CORS。


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

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

当需要使用CORS凭据时，我还没有深入研究。我还没有看到需要它们的示例，因此您可以安全地使用crossorigin（即`crossorigin =“ anonymous”）。

#4 楼

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

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

请求是相同的-origin（example.com从example.com请求子资源）

根本不需要preconnect；
如果要打开多个连接，浏览器将自行决定是否打开以及打开多少个连接（取决于服务器是否在TLS中宣布HTTP / 2支持）握手，浏览器设置等）。

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

请求是跨源的（ example.com请求来自another.com的子资源）如果实际请求具有在HTML中明确设置的crossorigin属性（在JS中为crossOrigin，则很重要），则预连接也必须具有相同的值（也许除了在没有意义且忽略了crossorigin的情况下-尚不完全清楚）

否则，如果要求<script type=module>：要检查

否则，如果请求是“老派”请求，则<img>，<style type=stylesheet>，<iframe>，经典<script>等（通过HTML或JS发起），而没有crossorigin explici
否则，如果请求是跨域字体请求，则预连接必须具有crossorigin

其他，如果请求是跨域字体请求crossorigin=anonymous或fetch：


如果是以凭据模式完成的（即附加了cookie或使用HTTP基本身份验证；则在获取时表示XHR；对于XHR：credentials !== omit）：预连接必须具有withCredentials === true

不在凭据模式下：预连接必须具有crossorigin=use-credentials




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

请注意，但是上述技巧不适用于非XHR / fetch请求，因为例如"credentials"=="include"|"same-origin"和fetch使用不同的算法来建立连接，如前所述。

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

其他说明和链接：


在Firefox中，即使应该进行预连接也不起作用

三种检查预连接是否起作用的方法
浏览器具有一些功能限制可以发生多少个并行DNS请求
在WebPageTest上使用自定义脚本注入进行预连接的实验