HTTP2推送未使用的网页

问题描述：

我在HTTP2响应中发送Link预加载标头。像这样：HTTP2推送未使用的网页

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

脚本，样式和图像不会导致任何问题 - 它们被推送和使用。但字体推，然后请求/再次得到和铬控制台抱怨：

资源https://example.com/assets/font/sourcesanspro_regular.woff2使用链接预紧预装但是从窗口的Load事件在几秒钟内不使用。请确保它没有预加载任何东西。

以下是提到的字体的响应标题。

推：

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

我在做什么错：

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

推后要求？

答

您必须添加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/。

有一点值得一提：当您使用匿名模式CORS获取字体时，您必须在获取字体时添加一个crossorigin属性。是的，即使您的字体与页面位于相同的原点。抱歉。

HTTP2推送未使用的网页

相关推荐