Safari 15.3 (17612.4.9.1.5) on MacOS loads the resource specified in the preload and again with fetch in the javascript code. XMLHttpRequest also loads the resource again not using the preloaded data. Minimal example: <!DOCTYPE html> <html lang="en"> <head> <title>Preload-Test</title> <meta charset="utf-8"> <link rel="preload" href="data.json" as="fetch" type="application/json" crossorigin> </head><body> <script> fetch('data.json', { credentials: 'same-origin', mode: 'cors' }).then(res => console.log(res)); </script> </body></html>
Created attachment 450631 [details] Web Inspector screenshot
Safari on iOS 15.3 shows the same behavior, loading the resource twice.
<rdar://problem/88426961>
I wonder whether this is a regression or whether this never really worked (maybe we are not in BufferData mode?). @Tobias, do you know whether this used to work before?
Hi, I'm not sure how the behavior was in the past but I just found this post: https://stackoverflow.com/questions/52635660/can-link-rel-preload-be-made-to-work-with-fetch/63814972#63814972 Due to one comment it might have already been this way since Safari 12.0.3 I can confirm that the posted solution works across browsers. <link rel="preload" as="fetch" href="/data.json"> combined with: fetch('/data.json', { method: 'GET', credentials: 'include', mode: 'no-cors', }) This solves my problem in this case. I'm no expert on the correct behavior given the original posted combinations of fetch options and usage of the crossorigin attribute. Also the standard resources seem to not cover this case clearly: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-crossorigin https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches https://w3c.github.io/preload/
Sadly there seems to be now another issue. The preloaded json file is always served from memory cache and gets only loaded again after restarting the browser.
It is also served repeatedly from memory cache even if the server send a no-cache header.
Created attachment 450831 [details] memory_cache
Still the case with `15.6.1 (17613.3.9.1.16)` and `Release 151 (Safari 16.0, WebKit 17615.1.1.2)`. FWIW MDN claims no support for `crossorigin` on `<link`> in Safari: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin#html.elements.link.crossorigin I don't see any difference in headers across requests. Chrome and Firefox work.
(In reply to tobias from comment #8) > Created attachment 450831 [details] > memory_cache Do you have a repro case available?
(In reply to Michał Łazowik from comment #9) > FWIW MDN claims no support for `crossorigin` on `<link`> in Safari: > https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/ > crossorigin#html.elements.link.crossorigin It claims support is unknown, not that there is no support. By contrast, https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement#browser_compatibility shows `crossOrigin` as having been supported since Safari 10.
Bug 249887 another issue with crossorigin.