HTTP2推送未使用的網頁

Question

我在HTTP2響應中發送Link預加載標頭。像這樣：

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 

推後要求？

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

有一點值得一提：當您使用匿名模式CORS獲取字體時，您必須在獲取字體時添加一個crossorigin屬性 。 是的，即使您的字體與頁面位於相同的原點。抱歉。