Apache httpd 2.4注入维护公告横幅到本地及反向代理页面方案咨询

一、Apache配置方法（兼容本地页面与反向代理后端页面） #

实现该需求需要用到Apache的mod_filter和mod_substitute模块，可对所有返回的HTML内容做统一修改，无论内容来自本地静态页面还是Tomcat、Zope等反向代理后端。

操作步骤 #

1. 启用必要模块
   • Debian/Ubuntu系统执行命令：
     a2enmod filter substitute
   • CentOS/RHEL系统编辑httpd.conf，添加以下加载规则：

   LoadModule filter_module modules/mod_filter.so
   LoadModule substitute_module modules/mod_substitute.so
   

2. 添加上下文注入规则
   可以将以下配置添加到全局httpd.conf或者对应虚拟主机的配置文件中：

   # 仅对HTML类型的响应执行替换，避免破坏静态资源、接口返回内容
   AddOutputFilterByType SUBSTITUTE text/html
   # 排除不需要注入的路径，如API接口、静态资源后缀可按需调整
   SetEnvIf Request_URI ^/api/ no-substitute
   SetEnvIf Request_URI \.(js|css|png|jpg|gif|svg|ico|json)$ no-substitute
   # 匹配<body>标签（支持带任意属性、不区分大小写），在<body标签后插入公告内容
   Substitute "s|<body([^>]*)>|<body$1>这里替换成你的公告HTML片段|ni"
   SubstituteOptions IgnoreCase
   # 处理反向代理场景下的内容替换，必须配置对应ProxyPass规则
   ProxyPass / http://你的后端服务地址/
   ProxyPassReverse / http://你的后端服务地址/
   # 若后端开启了gzip压缩，需添加以下配置确保可正常读取内容做替换
   RequestHeader set Accept-Encoding ""
   # 处理完成后可重新压缩内容返回给客户端，优化访问速度
   AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript
   

   如果你希望公告内容独立存为文件方便修改，也可以将公告内容保存到/etc/httpd/conf/maintenance_banner.html，将替换规则修改为：
   Substitute "s|<body([^>]*)>|<body$1>$(cat /etc/httpd/conf/maintenance_banner.html)|ni"

二、无干扰维护公告HTML片段 #

以下片段完全避免和现有页面CSS、JS逻辑冲突，不会破坏单页应用的正常运行：

<div id="global-maintenance-notice-2024" style="all: initial; position: fixed; top: 0; left: 0; right: 0; background: #dc3545; color: #ffffff; padding: 12px 20px; text-align: center; font-family: system-ui, sans-serif; font-size: 16px; font-weight: 600; z-index: 999999; box-shadow: 0 2px 12px rgba(0,0,0,0.2); box-sizing: border-box;">
  周一8-9点维护，所有服务不可用
  <button onclick="this.parentElement.style.display='none'; document.body.style.paddingTop = '0'" style="all: initial; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: none; border-radius: 4px; color: #ffffff; padding: 5px 10px; font-size: 14px; cursor: pointer;">
    关闭
  </button>
</div>
<script>
// 仅执行一次，避免单页应用路由跳转重复执行
if (!window.__maintenanceBannerInjected) {
  window.__maintenanceBannerInjected = true;
  // 给body添加顶部边距，避免页面内容被横幅遮挡
  const banner = document.getElementById('global-maintenance-notice-2024');
  document.body.style.paddingTop = (banner.offsetHeight + 8) + 'px';
}
</script>

片段特性说明 #

• 所有样式全内联，使用all: initial重置所有继承样式，完全不受页面原有CSS影响
• 元素使用唯一ID，不会和现有页面DOM ID冲突
• 脚本逻辑仅执行一次，不会干扰单页应用的路由、DOM更新逻辑
• 自带关闭按钮，关闭后自动恢复页面原有布局，不影响用户正常操作
• z-index设置为极高值，确保始终显示在页面最上层不会被遮挡

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