gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 21:03:35 55 4
gpt4 key购买 nike

我有一个很大的 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 调用相同的请求。

我很想在这件事上犯错。

最佳答案

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

<link rel="preload" as="fetch" href="/data.json">
其次,fetch api 请求也应该在 no-cors 中完成模式并包含凭据 (cookie)。
请注意,此请求不能有任何自定义 header (如 AcceptContent-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 模式不同。

关于fetch - 可以使链接 rel=preload 与 fetch 一起使用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52635660/

55 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com