HTTP2 выдвинутые веб-шрифты не используются

Question

Я отправляю 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

Что я делаю неправильно?

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

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