本文详解为何 `rel="preload"` 加载 json 时浏览器提示“未在几秒内使用”，核心原因是 `` 的 `crossorigin` 属性与 `fetch()` 的凭据模式不匹配；通过统一设为匿名模式（`crossorigin="anonymous"` 且 `fetch()` 不传 `credentials`）即可解决。
在现代 Web 性能优化中，<link rel="preload"> 是提前获取关键资源（如字体、脚本、JSON 数据）的有效手段。但当预加载 JSON 文件却始终触发以下控制台警告时：
The resource … was preloaded using link preload but not used within a few seconds from the window's load event.
或
A preload for '…' is found, but is not used because the request credentials mode does not match.
这通常不是缓存或网络问题，而是 预加载声明与后续 fetch 请求的凭据（credentials）语义不一致 所致。
? 关键原则：凭据模式必须严格匹配
浏览器将 <link preload> 视为一个独立的预请求，它会根据 crossorigin 属性决定是否携带凭据（如 cookies、HTTP 认证头）。而 fetch() 的 credentials 选项同样控制此行为。二者若不一致，浏览器将拒绝复用已预加载的响应，转而发起全新请求——导致预加载失效，并抛出上述警告。
将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。
| <link> crossorigin | fetch() credentials | 是否匹配 | 是否复用预加载 |
|---|---|---|---|
| anonymous | omit（默认）或未指定 | ✅ | ✔️ |
| use-credentials | include | ✅ | ✔️（但需 CORS 支持） |
| anonymous | include | ❌ | ✖️（警告：credentials mode does not match） |
| use-credentials | omit | ❌ | ✖️（同上） |
✅ 最佳实践（推荐用于静态 JSON）：
绝大多数前端读取的 JSON（如配置文件、CMS 数据、i18n 翻译包）是无状态、无需认证的公共资源，不应携带凭据。此时应：
- <link> 中使用 crossorigin="anonymous"（注意：anonymous 是合法值，不是 "anonymous" 字符串字面量，而是属性存在即生效）；
- fetch() 中完全省略 credentials 选项（其默认值为 'omit'），同时也不必显式设置 mode: 'cors'（fetch() 对跨域请求自动启用 CORS 模式，同源时 mode 默认为 'same-origin'，而 as="fetch" 预加载本身隐含 CORS 语义）。
<!-- ✅ 正确：放在 <head> 中，crossorigin="anonymous" --> <head> <link rel="preload" href="/_data/file.json" as="fetch" crossorigin="anonymous"> </head>
// ✅ 正确：简洁调用，不传 credentials 或 mode
fetch('/_data/file.json')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => {
console.log('Preloaded JSON loaded successfully:', data);
});⚠️ 常见错误与注意事项
crossorigin 属性值错误：
crossorigin="use-credentials" 要求服务端返回 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin *不能为 ``**（必须为具体源），否则 fetch 会失败。静态 JSON 通常无需此复杂配置。<link> 位置不当：
<link rel="preload"> 必须出现在触发 fetch() 的脚本之前，理想位置是 <head> 内。若在 <body> 底部或动态插入，预加载可能尚未启动，自然无法被后续 fetch 复用。开发服务器差异（如 localhost vs HTTPS）：
本地开发环境（http://localhost）下，同源请求默认不发送 Origin 头，但 fetch() 若显式设 mode: 'cors'，浏览器仍会添加 Origin 并触发预检（preflight），造成行为不一致。静态资源请避免主动设置 mode 和 credentials。验证是否生效：
在 Chrome DevTools 的 Network 面板 → Filter → Preloaded，可筛选出所有预加载资源；再查看目标 JSON 请求的 Initiator 列，若显示 preload 而非 fetch，说明复用成功；同时响应状态码应为 200（来自内存缓存）或 304（协商缓存），而非重复 200。
✅ 总结
预加载 JSON 失效的根本原因，90% 源于 crossorigin 与 fetch() 凭据策略的错配。对于无认证需求的静态 JSON，请坚持：
- <link> 使用 crossorigin="anonymous"（写法等价于 crossorigin）；
- fetch() 使用最简形式：fetch(url)；
- 确保 <link> 在文档早期（<head>）声明；
- 避免冗余配置（如 mode, credentials, method）。
如此，预加载将真正提升首屏数据加载性能，消除控制台警告，并让 Lighthouse 性能评分更进一步。
