Why are preload link not working for JSON requests ?

Question

The JavaScript on my website loads several JSON to initialize itself.

I would like to preload them so, when the JavaScript will launch an Ajax request on it, they wi

Answer 1

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.

Answer 2

I tried so many variations on the allowed values on https://w3c.github.io/preload/#as-attribute but the only thing that worked for me to fetch JSON data properly was removing the type and as directives completely and relying on the browser to figure it out. Works in the latest Chrome but I guess it might change as browser behaviour changes.

Answer 3

According to the Chrome bug mentioned in the comments, preload doesn't work when you have responseType = 'blob'.

The workaround is to set responseType = 'arraybuffer' and then in onload convert to blob manually using var blob = new Blob([xhr.response], {type: xhr.getResponseHeader("Content-Type")});