HTTP2 pushed webfonts не используется


Я посылаю заголовок предварительной загрузки Link в ответе HTTP2. Как этот:

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

Скрипты, стили и изображения не вызывают никаких проблем - они выталкиваются и используются. Но шрифты нажимаются, а затем запрашиваются / извлекаются снова, и консоль Chromium жалуется:

Ресурс 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-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

Что я делаю не так?

1 3

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

Один момент стоит рассмотреть: вы должны добавить атрибут crossorigin при выборке шрифтов, так как они выбираются с помощью анонимного режима CORS. Да, даже если ваши шрифты находятся в том же источнике, что и страница. Извиняюсь.