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는 링크 프리로드를 사용하여 사전로드하지만 윈도우의로드 이벤트에서 몇 초 내에 사용되지 않았다. 아무 것도 사전로드되지 않았는지 확인하십시오.

여기에 언급 된 글꼴의 응답 헤더가 있습니다.

는 밀어 : 내가 잘못 뭐하는 거지

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 속성 을 추가해야합니다 : 이상가는 가치

한 점. 글꼴이 페이지와 같은 출처에 있더라도 그렇습니다. 죄송합니다.