如何处理 http2-push 和子目录？

Posted 2023-03-10

【中文标题】如何处理 http2-push 和子目录？

【英文标题】：How to deal with http2-push and subdirectories?

【发布时间】：2018-03-25 04:48:50

【问题描述】：

我一直在开发一个具有以下结构的网站

主站点 + htaccess Fr 子目录（用于法语） En 子目录（英文） 图片、js 和 css 的资产子目录

htaccess包含一个http2服务器推送如下：

<IfModule http2_module>
SetEnvIf Cookie "cssloaded=1" cssloaded
<filesMatch "\.([hH][tT][mM][lL]?)">
Header add Link "<assets/base/css/style.css>;rel=preload;as=style" env=!cssloaded
Header add Set-Cookie "cssloaded=1; Path=/; Secure; HttpOnly" env=!cssloaded
</filesMatch>

问题是服务器也将 style.css 推送到法语和英语子目录中，导致 404（然后在没有服务器推送的情况下继续加载正确的 ../assets/base/css/style.css。 css)。

如何避免这种情况或（最好）将文件推送到所有目录但指向正确的文件？

【参考方案1】：

您正在推送一个相对路径样式表：

Header add Link "<assets/base/css/style.css>;rel=preload;as=style" env=!cssloaded

为什么不推一个绝对的？：

Header add Link "</assets/base/css/style.css>;rel=preload;as=style" env=!cssloaded

或者，或者，使用 location 或 locationMatch 代替 fileMatch：

<locationMatch "^/$">
Header add Link "<assets/base/css/style.css>;rel=preload;as=style" env=!cssloaded
Header add Set-Cookie "cssloaded=1; Path=/; Secure; HttpOnly" env=!cssloaded
</locationMatch>
<locationMatch "^/en/$">
Header add Link "<../assets/base/css/style.css>;rel=preload;as=style" env=!cssloaded
Header add Set-Cookie "cssloaded=1; Path=/; Secure; HttpOnly" env=!cssloaded
</locationMatch>
<locationMatch "^/fr/$">
Header add Link "<../assets/base/css/style.css>;rel=preload;as=style" env=!cssloaded
Header add Set-Cookie "cssloaded=1; Path=/; Secure; HttpOnly" env=!cssloaded
</locationMatch>

【讨论】：

不幸的是它在htaccess中所以locationmatch不起作用......绝对路径我没有想到，但害怕它需要额外的查找（否定服务器推送的速度优势) 但这是个好主意。我会测试它谢谢！

为什么需要额外查找？

你是绝对正确的，它没有。顺便说一句，绝对路径建议完美无缺。谢谢！

没问题。我想你是从我的博客文章 (tunetheweb.com/performance/http2/http2-push) 中获取的，因为配置看起来很熟悉 :-) 所以检查了一下，里面有绝对路径，所以我猜是复制粘贴错误！