HTML - 为什么我的预加载资源再次加载？
cyq*_*mon 5 html fonts cross-domain preload
这是我的示例代码：
<body>
<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" />
<style>
@font-face {
font-family: "Roboto";
src: url("/fonts/Roboto-Regular.woff2") format("woff2");
}
* {
font-family: "Roboto", sans-serif;
}
</style>
<section>
<h2>Hello World</h2>
</section>
</body>
我的期望：
Roboto-Regular.woff2下载一次。第二次访问应该花费 <5ms，因为它是从缓存中读取的。
我实际看到的：
Roboto-Regular.woff2被完全下载两次。第二次访问花费的时间与第一次一样多。
这里的蓝色条是Content Download。
我尝试过的：
此处建议的解决方案是：再次加载预加载的图像。但我很快意识到我的问题与缓存无关。我已经配置了服务器端缓存控制，如文件的响应头中所示：
之前的瀑布截图是硬刷新后截取的（ctrl F5）；这是在软刷新后拍摄的：
这次两个请求都只是从缓存中得到了响应，这说明缓存与整个情况无关。
那么这里出了什么问题呢？
我的环境：
Windows 10 专业版 N 1909
谷歌浏览器 78.0.3904.108 x64
事实证明它与CORS有关。
今天，当我注意到控制台中有几个以前没有的新警告时，我无意中偶然发现了答案。
这些警告基本上完全按原样描述了我的问题。我做了一个快速的谷歌搜索并登陆这里：使用 rel="preload" 预加载内容，其中说：
一个有趣的例子是字体文件，即使提取不是跨源的。由于各种原因，这些必须使用匿名模式 CORS 获取。
按照建议，我只是简单地加入crossorigin了我的预加载声明：
<link rel="preload" href="/fonts/Roboto-Regular.woff2" as="font" crossorigin />
我的预载工作。
还
如果您要预加载 MIME 类型为fetch诸如的资源，出于类似原因（我假设）（参考）.json，您还需要crossorigin在预加载声明中包含该属性。
