link预加载JSON后XHR/fetch重复请求的跨浏览器问题排查

问题根源 #

不同浏览器对preload资源的缓存匹配逻辑存在差异：

• Chrome能严格匹配请求的URL、请求头、跨域标识，允许XHR复用as="fetch"的预加载资源
• Firefox对XHR请求的缓存匹配要求更严格，默认不会复用as="fetch"标记的预加载资源
• Safari不管是XHR还是fetch请求，都存在匹配逻辑差异，导致预加载资源无法被复用

具体修复步骤 #

1. 调整preload的as属性适配XHR #

把预加载标签的as="fetch"改成"script"，同时保留crossorigin属性：

<link rel="preload" href="https://swapi.dev/api/people/1" as="script" crossorigin="anonymous">

这个改动能让Firefox和Safari的XHR请求正确复用预加载资源。

2. 对齐请求头与预加载的特征 #

预加载JSON时，浏览器自动发送Accept: application/json请求头，而你之前的axios请求用的是Accept: */*，这会导致缓存匹配失败。修改axios的请求头：

axios.get("https://swapi.dev/api/people/1", { 
  headers: { 
    accept: "application/json" 
  } 
})

3. 给Safari的fetch请求指定凭据模式 #

Safari的fetch默认会携带凭据，和预加载的crossorigin="anonymous"（对应credentials: "omit"）不匹配，需要显式设置：

fetch("https://swapi.dev/api/people/1", {
  credentials: "omit",
  headers: {
    accept: "application/json"
  }
})

验证方法 #

打开浏览器开发者工具的Network面板：

• 确认预加载请求返回200状态码
• 后续请求的Size显示为disk cache或memory cache，说明已复用预加载资源

内容的提问来源于stack exchange，提问作者Joren