Why are preload link not working for JSON requests ?
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content , you have to add as="fetch"
for JSON files.So your code becomes
<link rel="preload" href="/test.json" as="fetch">
It's supported by all modern browsers and you get a warning message if this resource is not used within a few seconds because it is counterproductive to "preload" it in a such case (delay, double load etc.)
It's different from <link rel="prefetch" ...>
which is to anticipate future navigation and not supported widely.
A Chrome illustrated article about this: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
If you have the same problem as me, your response is probably being sent with Vary: Accept
, the preload request is sent with Accept: */*
, and the fetch/xhr request is being made with Accept: application/json
.
It seems like the preload Accept:
behavior can't be changed (sigh), so you'll have to either remove the Vary: Accept
, or make the fetch/xhr request with a matching Accept:
header.
You have to add not only as="fetch", but (based on this comment) also crossorigin="anonymous". This should work:
<link rel="preload" href="/test.json" as="fetch" crossorigin="anonymous">