重定向页面丢失CSS样式与图片的问题排查求助

问题说明 #

通过.htaccess配置将用户重定向到maintenance.php维护页面后，页面的CSS样式、图片都无法正常加载；移除.htaccess文件后，页面资源显示正常。另外，添加allowLogin=true参数访问其他页面时，同样出现样式和图片加载失败的问题。

当前.htaccess配置 #

RewriteEngine On
# Redirect to maintenance page unless query parameter supplied
RewriteCond %{QUERY_STRING} !^allowLogin=true$
RewriteCond %{REQUEST_URI} !/maintenance.php$
RewriteRule (.*) https://www.example.com/maintenance.php [R,L]

页面资源引用方式 #

• 图片引用：

  <img src="assets/img/current-logo.png" width="250px">
  

• CSS引用：

  <link rel="stylesheet" href="assets/css/styles.css">
  

排查现象 #

• 开启重定向时，网络请求显示静态资源加载失败；关闭重定向后资源加载正常
• 浏览器控制台存在第三方工具加载错误

解决办法 #

1. 排除静态资源的重定向 #

在现有规则中添加条件，让CSS、JS、图片等静态资源跳过重定向，避免这些资源被错误转发到维护页面。修改后的.htaccess代码如下：

RewriteEngine On
# 跳过CSS、JS、图片等静态资源的重定向
RewriteCond %{REQUEST_URI} !\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf)$ [NC]
# 仅当没有allowLogin=true参数时执行重定向
RewriteCond %{QUERY_STRING} !^allowLogin=true$
# 排除维护页面本身
RewriteCond %{REQUEST_URI} !/maintenance.php$
RewriteRule (.*) https://www.example.com/maintenance.php [R,L]

2. 使用绝对路径引用资源 #

把页面中资源的相对路径改为绝对路径（以/开头），确保无论当前URL是什么，资源都能正确定位：

• 图片改为：<img src="/assets/img/current-logo.png" width="250px">
• CSS改为：<link rel="stylesheet" href="/assets/css/styles.css">

3. 排查第三方工具错误 #

控制台的第三方工具加载错误可能干扰页面渲染，建议暂时禁用该工具，或检查其加载逻辑是否与重定向规则冲突。

内容的提问来源于stack exchange，提问作者Peter Haworth