Question

我有一个很大的JSON Blob，我想预先加载我的网页。为此，我已经在页面中添加了<link rel="preload" as="fetch" href="/blob.json>。我也有一个JS请求来提取相同的Blob。

这不起作用，并且控制台报告“ [警告]资源blob.json已使用链接预加载进行了预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保未对其进行任何预加载。 “

MDN claims，可以通过在链接标记中添加crossorigin来解决。 AFAICT，这是不正确的，并且没有任何组合或跨域属性将使其真正起作用。

使用开发者控制台中的copy-as-curl命令，似乎没有链接标记加上属性的组合，这些属性将发出与JS中的fetch / XHR调用相同的请求。

我想错了。

Answer 1

这是预加载抓取的有效解决方案，该解决方案在Chrome和Safari中均可使用，并支持cookie。

不幸的是，它仅适用于相同的域请求。

首先，不要为预加载标签指定crossorigin属性，这将确保Safari以no-cors模式发送请求并包含cookie

<link rel="preload" as="fetch" href="/data.json">

第二，获取api请求也应以no-cors模式完成，并包含凭据（cookie）。请注意，此请求不能具有任何自定义标头（例如Accept，Content-Type等），否则浏览器将无法将该请求与预加载的请求匹配。

fetch('/data.json', {
    method: 'GET',
    credentials: 'include',
    mode: 'no-cors',
})

我尝试了crossorigin属性值和访存API配置的其他组合，但没有一个在Safari中有效（仅在Chrome中）。

这是我尝试过的：

<link rel="preload" as="fetch" href="/data.json" crossorigin="anonymous">
fetch('/data.json', {
    method: 'GET',
    credentials: 'same-origin',
    mode: 'cors',
})

以上内容在Chrome浏览器中有效，但在Safari中不可用，因为cookie不是通过Safari中的预加载请求发送的。

<link rel="preload" as="fetch" href="/data.json" crossorigin="use-credentials">
fetch('/data.json', {
    method: 'GET',
    credentials: 'include',
    mode: 'cors',
})

以上内容适用于Chrome，但不适用于Safari。尽管cookie是通过预加载请求发送的，但Safari可能无法将取回与预加载请求进行匹配，这可能是因为cors模式不同。

Answer 2

这似乎是Safari和Chrome之间的区别。 Safari将警告发布到控制台，但Chrome没有发布警告，因此也许在链接元素中添加crossorigin确实可以解决问题，但是Safari存在某种错误？

可以使rel rel = preload与提取一起使用吗？

2 个答案: