如何正确使用 link preload 预加载 JSON 资源以避免未命中警告

本文详解为何 `` 无法被后续 `fetch()` 请求复用，并提供符合规范的配置方案：统一跨域策略、移除冗余凭证参数、确保 dom 位置正确，从而真正启用浏览器预加载缓存。

在 Web 性能优化中， 是提升关键资源加载速度的重要手段。但当为 jsON 文件预加载时，若 fetch() 请求未能复用预加载资源，浏览器会抛出典型警告：

“The Resource … was preloaded using link preload but not used within a few seconds…”“…not used because the request credentials mode does not match.”

这类问题根本原因在于 crossorigin 属性与 fetch() 的 credentials/mode 选项不匹配，导致浏览器将预加载与实际请求视为两个独立的、不可共享缓存的请求。

✅ 正确配置：保持跨域语义一致

对于静态 json 文件（无 cookie 依赖、无需服务端鉴权），不应启用凭据（credentials）。此时应采用最轻量、兼容性最佳的配置：

对应 javaScript 应完全省略 credentials 和 mode 显式声明，依赖 fetch() 默认行为：

// ✅ 正确：自动使用 mode: 'cors' + credentials: 'same-origin' fetch("/_data/file.json")   .then(res => {     if (!res.ok) throw new Error(`HTTP ${res.status}`);     return res.json();   })   .then(data => {     console.log("Preload reused successfully:", data);   });

? 为什么这样有效？

• crossorigin=”anonymous” 告知浏览器：该资源可跨域获取，但不携带凭据（如 cookies、http 认证头）；
• fetch() 默认 mode: ‘cors’ 且 credentials: ‘same-origin’ —— 当请求同源资源时，’same-origin’ 等价于 ‘omit’（即不发凭据），与 anonymous 完全匹配；
• 浏览器因此判定：预加载与 fetch 是同一语义请求，可安全复用已预取的响应（含 304 缓存验证）。

⚠️ 常见错误与规避建议