fetch - 可以使链接 rel=preload 与 fetch 一起使用吗？

Question

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

这不起作用，控制台报告:

[Warning] The resource blob.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

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

使用来自开发者控制台的 copy-as-curl 命令，似乎没有链接标签和属性的组合，它们将发出与 JS 中的 fetch/XHR 调用相同的请求。

我很想在这件事上犯错。

Answer 1

这是预加载 fetch 的工作解决方案，它适用于 Chrome 和 Safari 并支持 cookie。
不幸的是，它仅适用于相同的域请求。
一、不要指定 crossorigin preload 标签的属性，这将确保 Safari 将在 no-cors 中发送请求模式并包含 cookie

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

其次，fetch api 请求也应该在 no-cors 中完成模式并包含凭据 (cookie)。
请注意，此请求不能有任何自定义 header (如 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 中无效，因为 Safari 中的预加载请求不会发送 cookie。

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

以上在 Chrome 中有效，但在 Safari 中无效。虽然 cookie 是通过预加载请求发送的，但 Safari 无法将 fetch 与预加载请求匹配，这可能是因为 cors 模式不同。