提问人:ak0000 提问时间:8/2/2023 最后编辑:Philak0000 更新时间:8/2/2023 访问量:154
JSON文件的获取请求未命中链接预加载
Fetch request for JSON file not hitting link preload
问:
我有一个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”,但我不确定如何。
谢谢
答:
鉴于您的 JSON 文件是静态的,您不需要任何凭据(也称为 cookie)。这意味着您可以在 中使用 和省略crossorigin="anonymous"
<link>
credentials
fetch()
<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>
评论
crossorigin="anonymous"
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
fetch()
setTimeout()
fetch()
<link>
<head>
<script>
评论
credentials: 'include'
_data/file.json
fetch(URL, { method: 'get', mode: 'no-cors'})
crossorigin
crossorigin="anonymous"
mode
'cors'
credentials
mode: 'no-cors'
永远不会为你试图做的事情工作。再说一次,我没有问,所以我不确定你为什么要重复它mode
fetch()
credentials