push - 未使用 HTTP2 推送 webfonts

Question

我正在发送 Link HTTP2 响应中的预加载 header 。像这个:

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

脚本、样式和图像不会引起任何问题 - 它们被推送和使用。但是字体被推送然后再次请求/获取并且 Chromium 控制台提示:

The resource https://example.com/assets/font/sourcesanspro_regular.woff2 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.

以下是上述字体的响应 header 。

推:

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

我究竟做错了什么？

Answer 1

您必须为字体添加 crossorigin:

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/ .

One point worth going over: You have to add a crossorigin attribute when fetching fonts, as they are fetched using anonymous mode CORS. Yes, even if your fonts are on the same origin as the page. Sorry.