Pushed resources get downloaded twice and warnings about crossorigin

Question

I try to use http/2 server-push to preload some assets within a Laravel Website.

<!-- Preload -->
<link href="/fonts/Logo.woff" as="font" type="font/woff" rel="preload" crossorigin>
<link href="/css/app.css" rel="preload" as="style" type="text/css" crossorigin>
<link href="/js/app.js" rel="preload" type="application/javascript" as="script" crossorigin>
<!-- Use -->
<link href="/css/app.css" rel="stylesheet">
<script type="module" src="/js/app.js"></script>

I'm using a Middleware to set Link-Headers.

However, the script and font get downloaded twice (push and normal request)

They both also produce warnings

"A preload for 'https://localhost/fonts/Logo.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute."

"A preload for 'https://localhost/js/app.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute."

I tried to remove crossorigin from all three tags, but this didn't solve the issue. Also tried different combinations like crossorigin="use-credentials" or crossorigin="anonymous".

Answer 1

you need to add the very same preload attribute to your usage link

So instead of your

<!-- Preload -->
<link href="/fonts/Logo.woff" as="font" type="font/woff" rel="preload" crossorigin>
<link href="/css/app.css" rel="preload" as="style" type="text/css" crossorigin>
<link href="/js/app.js" rel="preload" type="application/javascript" as="script" crossorigin>
<!-- Use -->
<link href="/css/app.css" rel="stylesheet">
<script type="module" src="/js/app.js"></script>

Put

<!-- Preload -->
<link href="/fonts/Logo.woff" as="font" type="font/woff" rel="preload" crossorigin>
<link href="/css/app.css" rel="preload" as="style" type="text/css" crossorigin>
<link href="/js/app.js" rel="preload" type="application/javascript" as="script" crossorigin>
<!-- Use -->
<link href="/css/app.css" rel="stylesheet" crossorigin>
<script type="module" src="/js/app.js" crossorigin></script>

Answer 2

Just in case someone has the same issue. The Link HTTP-Header has to contain crossorigin for Font/Script, but not for CSS/Image