问题描述
我正在HTTP2响应中发送Link
预加载标头.像这样一个:
I'm sending a Link
preload header in the HTTP2 response. Like this one:
Link: </assets/script/main.js?h=1795387974>; rel=preload; as=script, </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font
脚本,样式和图像不会引起任何问题-它们已被推送和使用.但是字体被推送,然后再次请求/获取,Chromium控制台抱怨:
scripts, styles and images don't cause any problem - they are pushed and used. But fonts are pushed and then requested/fetched again and the Chromium console complains:
以下是提到的字体的响应标头.
Here are the response headers of the mentioned font.
按下:
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
我在做什么错了?
推荐答案
您必须为字体添加交叉源:
You have to add crossorigin for fonts:
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/.
For more information see here: https://github.com/w3c/preload/issues/32and here: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/.
这篇关于未使用HTTP2推送的Webfonts的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!