as="fetch"预加载必须显式声明crossorigin属性且仅适用于同源或cors友好接口，否则静默失败；它仅触发http缓存下载，不解析、不暴露数据，后续fetch需完全匹配url和响应头才能复用。
as="fetch"必须搭配crossorigin且只用于同源或CORS友好接口
浏览器对as="fetch"的处理非常严格：它不会自动加Origin头，但会检查响应头是否含Access-Control-Allow-Origin。哪怕接口和页面同源，漏写crossorigin也会导致预加载静默失败——Network面板里请求可能显示为(Other)、Priority降为Low，甚至直接不发起。
常见错误是把后端API当普通资源用，比如写成：
<link rel="preload" href="/api/config.json" as="fetch">
这在Chrome/Firefox中基本无效。正确写法必须显式声明crossorigin：
<link rel="preload" href="/api/config.json" as="fetch" crossorigin>
-
crossorigin不能写成crossorigin="anonymous"——虽然多数情况能工作，但部分CDN或旧版服务端会因头校验失败而拒绝 - 如果接口返回
Access-Control-Allow-Origin: *或明确域名，且带crossorigin属性，预加载才可能复用到后续fetch()调用 - 非CORS接口（如纯同源JSON）建议改用
as="script"+type="application/json"配合text/plain响应头，更稳定
preload的fetch数据无法直接读取，仍需正常fetch()调用
rel="preload"只触发下载并存入HTTP缓存，**不解析、不暴露给JavaScript**。你不能通过cache.match()或fetch()同步拿到结果，也不能靠它绕过CORS限制。
必须在代码里再发一次fetch()，但此时浏览器会复用已预加载的响应体：
fetch('/api/config.json').then(r => r.json()).then(data => {/* ... */})
- 只要URL完全一致（包括查询参数、大小写、尾部斜杠），且服务端返回的
Content-Type与预加载时匹配，就会命中缓存 - 若接口返回
Cache-Control: no-store或no-cache，预加载也无效——它依赖HTTP缓存机制 - 不要指望预加载能“提前解码JSON”，
fetch().then(r => r.json())仍会执行解析，只是跳过了网络等待
as="fetch"容易被当成普通fetch，优先级常被低估
即使写了as="fetch"，浏览器也不会给它分配像as="script"或as="font"那样的高优先级。它的默认Priority通常是Medium或Low，尤其在弱网下容易被CSS、字体挤到后面。
- 目前没有
fetchpriority可配给as="fetch"——该属性只对as="image"、as="script"等生效 - 若接口是首屏渲染强依赖（比如SSR fallback数据），建议改用
as="script"并返回application/javascript，利用JS高优先级队列 - 验证是否生效：打开Chrome DevTools → Network → 刷新页面 → 找对应请求 → 看
Initiator列是否为preload，且Priority不是(Other)
动态路径或带token的API不能用preload
href必须是静态字符串，任何运行时拼接都会失效。比如这些写法都错：
<link rel="preload" href="/api/user?token=<%=%20token%20%>" as="fetch" crossorigin>
<link rel="preload" href="%60/api/user?ts=%24%7BDate.now()%7D%60" as="fetch" crossorigin>
- 服务端模板变量（如
）若未在HTML生成阶段求值，最终会当字面量请求，大概率404 - JS模板字符串在HTML中不执行，
href值就是原始字符串，含${...}语法 - 带时间戳、随机数、用户ID的URL，每次都不一样，根本无法复用缓存——不如放弃preload，改用
fetch()加cache: 'force-cache'控制
真正需要预加载的API，路径必须固定、无敏感参数、且服务端支持长期缓存。否则，不如老老实实等页面逻辑触发fetch——多那200ms网络延迟，远比搞错preload带来的维护成本低。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
