JSON文件的获取请求未命中链接预加载

Fetch request for JSON file not hitting link preload

提问人:ak0000 提问时间:8/2/2023 最后编辑:Philak0000 更新时间:8/2/2023 访问量:154

问:

我有一个HTML预加载,如下所示:

<link
  rel="preload"
  href="/_data/file.json"
  as="fetch"
  crossorigin="use-credentials"
>

(我已经尝试了属性的每个排列)crossorigin

然后是看起来像这样的 JS:

fetch(dataPath, {
  method: 'get',
  mode: 'cors',
  credentials: 'include'
})

(我已经尝试了模式和凭据选项的每个排列。

这两行生成相同的请求标头:

Request URL: http://localhost:4005/_data/file.json
Request Method: GET
Status Code: 304 Not Modified
Remote Address: [::1]:4005
Referrer Policy: strict-origin-when-cross-origin
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:4005
If-Modified-Since: Tue, 01 Aug 2023 21:24:04 GMT
If-None-Match: W/"1bdb-189b2fc9372"
Origin: http://localhost:4005
Referer: http://localhost:4005/path
Sec-Ch-Ua: "Not/A)Brand";v="99", "Google Chrome";v="115", "Chromium";v="115"
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

然而,我在Chrome和Safari中继续收到错误:

资源 http://localhost:4005/_data/file.json 已使用链接预加载进行预加载,但在窗口的 load 事件后的几秒钟内未使用。请确保它具有适当的值,并且是有意预加载的。as

对于一些跨域 HTML 属性/获取 CORS 选项排列,我还收到警告:

request_json.js:11 找到“http://localhost:4005/_data/file.json”的预加载,但未使用,因为请求凭据模式不匹配。考虑看一下 crossorigin 属性。

为什么浏览器没有使用预加载?在生产环境中,HTTPS似乎也发生了同样的事情,但是相同的JS不会导致在本地发送origin标头。

我已经查看了许多其他涉及相同错误的堆栈溢出问题,例如这里,但要么解决方案无济于事,要么我不明白必须更改什么,例如我认为我没有发送“链接 HTTP-Header”,但我不确定如何。

谢谢

javascript html cors fetch-api 预加载

评论

1赞 Phil 8/2/2023
你使用有什么原因吗?您的是静态的还是动态的?它是否真的需要在请求中使用 cookie?credentials: 'include'_data/file.json
0赞 ak0000 8/2/2023
@Phil 没有具体原因,我只是尝试了每一种组合。如果我这样做并删除该属性,或者使用我会得到同样的错误。File.json是静态的。fetch(URL, { method: 'get', mode: 'no-cors'})crossorigincrossorigin="anonymous"
1赞 Phil 8/2/2023
我不是在问(默认为无论如何),我是在问mode'cors'credentials
2赞 Phil 8/2/2023
mode: 'no-cors'永远不会为你试图做的事情工作。再说一次,我没有问,所以我不确定你为什么要重复它mode
1赞 Phil 8/2/2023
我问你为什么在根本不涉及 cookie 的情况下尝试使用该选项fetch()credentials

答:

2赞 Phil 8/2/2023 #1

鉴于您的 JSON 文件是静态的,您不需要任何凭据(也称为 cookie)。这意味着您可以在 中使用 和省略crossorigin="anonymous"<link>credentialsfetch()

<link rel="preload" href="/_data/file.json" as="fetch" crossorigin="anonymous"/>
fetch("/_data/file.json")
  .then((res) => res.json())
  .then((data) => {
    // ...
  });

默认值包括,因此没有理由显式设置它们。fetch()method: "GET"mode: "cors"


请注意,理想情况下,标签应放置在文档的部分中。至少,它们应该在尝试使用预加载资产的任何内容之前发生。<link><head>

评论

0赞 ak0000 8/2/2023
嗨,非常感谢你把这些放在一起。这是我尝试过的排列之一,但不幸的是,它仍然会产生相同的错误。(我在 HTML 中使用并且没有选项参数来获取)crossorigin="anonymous"
1赞 Phil 8/2/2023
@ak0000那到底是什么错误?确保您在两次尝试之间清除了浏览器缓存
0赞 ak0000 8/2/2023
错误是 as 的值,它是故意预加载的。 使用空缓存和硬重载。我可以尝试进行最小的复制。感谢您的帮助!The resource http://localhost:4005/_data/file.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate
2赞 Phil 8/2/2023
@ak0000 那么,您是否在页面加载后的几秒钟内提出请求?如果我将请求延迟 ~10 秒,我当然可以重现该错误,但除此之外,它工作正常......我在页面加载时看到了对 JSON 文件的请求,但在发生时没有看到另一个请求fetch()setTimeout()fetch()
1赞 Phil 8/2/2023
预加载应位于文档的部分中,或者至少位于标记之前<link><head><script>