首页 > 解决方案 > 推送的资源被下载两次并警告有关跨域

问题描述

我尝试使用 http/2 server-push 在 Laravel 网站中预加载一些资产。

<!-- 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>

我正在使用中间件来设置链接头。

但是,脚本和字体被下载了两次(推送和正常请求)

他们都产生警告

“已找到‘ https://localhost/fonts/Logo.woff ’的预加载,但由于请求凭据模式不匹配而未使用。考虑查看 crossorigin 属性。”

“已找到‘ https://localhost/js/app.js ’的预加载,但未使用,因为请求凭据模式不匹配。考虑查看 crossorigin 属性。”

我试图crossorigin从所有三个标签中删除,但这并没有解决问题。还尝试了不同的组合,例如crossorigin="use-credentials"or crossorigin="anonymous"

标签: cross-domainhttp2preloadserver-push

解决方案


以防万一有人有同样的问题。Link HTTP-Header 必须包含字体/脚本的跨域,但不能包含 CSS/图像


推荐阅读