可以使rel rel = preload与fetch一起使用吗? [英] Can link rel=preload be made to work with fetch?

问题描述

我有一个很大的JSON Blob，我想预先加载我的网页.为此，我已经在页面上添加了<link rel="preload" as="fetch" href="/blob.json">.我也有一个JS请求来提取相同的Blob.

I have a large JSON blob I would like to have preloaded with my webpage. To do this, I have added <link rel="preload" as="fetch" href="/blob.json"> to my page. I also have a JS request to fetch the same blob.

这不起作用，并且控制台报告:

This does not work, and the console reports:

[警告]资源blob.json已使用链接预加载进行了预加载，但在窗口加载事件发生后的几秒钟内未使用.请确保未预装任何内容.

[Warning] The resource blob.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

MDN声明，可以通过添加以下内容解决此问题crossorigin链接标记. AFAICT，这是不正确的，并且没有任何组合或跨域属性将使其真正起作用.

MDN claims that this can be fixed by adding crossorigin to the link tag. AFAICT, this is not true, and no combination or crossorigin attributes will actually make it work.

使用开发者控制台中的copy-as-curl命令，似乎没有链接标记加上属性的组合，这些属性将发出与JS中的fetch/XHR调用相同的请求.

Using the copy-as-curl command from the developer console, it seems like there is no combination of link tag plus attributes that will issue the same request as a fetch/XHR call in JS.

我想错了.

推荐答案

这是预加载抓取的有效解决方案，该方法可在Chrome和Safari中使用，并支持cookie.

Here is the working solution to preload fetch that works both in Chrome and Safari and supports cookies.

不幸的是，它仅适用于相同的域请求.

Unfortunately, it works only for the same domain requests.

首先，不要为预加载标签指定crossorigin属性，这将确保Safari以no-cors模式发送请求并包含cookie

First, do not specify crossorigin attribute for preload tag, this will ensure Safari will send request in no-cors mode and include cookies

<link rel="preload" as="fetch" href="/data.json">

第二，获取api请求也应以no-cors模式完成，并包含凭据(cookie). 请注意，此请求不能具有任何自定义标头(例如Accept，Content-Type等)，否则浏览器将无法将该请求与预加载的请求匹配.

Second, the fetch api request should also be done in no-cors mode and include credentials (cookies). Pay attention that this request cannot have any custom headers (like Accept, Content-Type, etc), otherwise the browser won't be able to match this request with preloaded one.

fetch('/data.json', {
    method: 'GET',
    credentials: 'include',
    mode: 'no-cors',
})

我尝试了crossorigin属性值和获取API配置的其他组合，但是它们都不适用于Safari(仅在Chrome中).

I have tried other combinations of crossorigin attribute value and fetch API configuration, but none of them worked for me in Safari (only in Chrome).

这是我尝试过的:

<link rel="preload" as="fetch" href="/data.json" crossorigin="anonymous">
fetch('/data.json', {
    method: 'GET',
    credentials: 'same-origin',
    mode: 'cors',
})

以上内容适用于Chrome，但不适用于Safari，因为Cookie并不是通过Safari中的预加载请求发送的.

The above works in Chrome, but not in Safari, because cookies are not sent by preload request in Safari.

<link rel="preload" as="fetch" href="/data.json" crossorigin="use-credentials">
fetch('/data.json', {
    method: 'GET',
    credentials: 'include',
    mode: 'cors',
})

以上内容适用于Chrome，但不适用于Safari.尽管cookie是通过预加载请求发送的，但Safari可能无法将取回与预加载请求进行匹配，这可能是因为cors模式不同.

The above works in Chrome but not in Safari. Though cookies are sent by preload request, Safari is not able to match fetch with preload request probably because of the different cors mode.

这篇关于可以使rel rel = preload与fetch一起使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！