10

我Link在 HTTP2 响应中发送预加载标头。像这个：

Link: </assets/script/main.js?h=1795387974>; rel=preload; as=script, </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font

脚本、样式和图像不会引起任何问题——它们是被推送和使用的。但是字体被推送，然后再次请求/获取，Chromium 控制台抱怨：

资源https://example.com/assets/font/sourcesanspro_regular.woff2已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它不是无缘无故预加载的。

以下是上述字体的响应标头。

推：

accept-ranges:bytes
cache-control:max-age=5184000, public
content-length:16892
content-type:application/octet-stream
date:Mon, 25 Sep 2017 09:22:05 GMT
last-modified:Mon, 18 Sep 2017 14:33:31 GMT
pragma:public
status:200
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-http2-push:pushed
x-xss-protection:1; mode=block

推送后请求：

accept-ranges:bytes
cache-control:max-age=5184000, public
content-length:16892
content-type:application/octet-stream
date:Mon, 25 Sep 2017 09:22:05 GMT
last-modified:Mon, 18 Sep 2017 14:33:31 GMT
pragma:public
status:200
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block

我究竟做错了什么？

4

1 回答 1

6

您必须为字体添加跨域：

Link: </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font; crossorigin

有关更多信息，请参见此处：https ://github.com/w3c/preload/issues/32 和此处：https ://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/ .

值得回顾的一点：在获取字体时必须添加一个 crossorigin 属性，因为它们是使用匿名模式 CORS 获取的。是的，即使您的字体与页面的来源相同。对不起。

于 2017-09-25T19:26:17.620 回答