HTTP2プッシュされたWebフォントが使用されていません

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属性 を追加する必要があります。 フォントがページと同じ原点にある場合でも、はい。ごめんなさい。