React应用每次新部署后如何清理浏览器缓存？配置缓存头无效求解

• 第一步：确认mod_headers模块已启用
  运行以下命令检查模块状态：

httpd -M | grep headers

如果输出中没有headers_module (shared)，需要先启用模块：Debian/Ubuntu环境执行a2enmod headers，CentOS/RHEL环境编辑httpd.conf取消LoadModule headers_module modules/mod_headers.so行的注释，修改后重启Apache服务生效。

• 第二步：修正headers.conf缓存规则
  你当前的VirtualHost配置引入了全局conf/headers.conf，需要确保规则配置正确，以下是强制禁用缓存的标准规则示例，可直接替换你现有headers.conf的内容：

<FilesMatch "\.(html|htm|js|css|json|png|jpg|jpeg|gif|ico|svg)$">
    Header always set Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"
    Header always set Pragma "no-cache"
    Header always set Expires "Thu, 01 Jan 1970 00:00:00 GMT"
    Header always unset ETag
    FileETag None
</FilesMatch>

注意必须加always参数，否则仅对2xx/3xx系列部分状态码的响应返回缓存头。如果仅需要对站点根目录生效，也可以将这段规则直接写在<Directory /var/www/html/build/>块内，优先级高于全局配置。

• 第三步：排查.htaccess规则冲突
  你当前Directory块配置了AllowOverride All，站点根目录下的.htaccess规则优先级高于VirtualHost配置，检查/var/www/html/build/目录下是否存在.htaccess文件，确认里面没有其他缓存相关配置。如果不需要用到.htaccess，可将AllowOverride All改为AllowOverride None，既避免冲突也能提升服务性能。

• 第四步：验证响应头返回结果
  打开浏览器开发者工具的「网络」面板，刷新页面后点击任意资源，查看响应头中是否返回了你配置的Cache-Control、Expires等字段。如果未返回对应字段，检查规则匹配的资源后缀、路径是否正确，重启Apache后再次测试。

• 第五步：清除浏览器已有缓存
  服务端更新缓存头不会自动删除浏览器之前已经缓存的旧资源，需要手动清除：Windows/Linux按Ctrl+Shift+Delete，Mac按Command+Shift+Delete，选择「缓存的图片和文件」清除后重启浏览器即可。开发阶段可开启开发者工具的「禁用缓存（打开开发者工具时生效）」选项，避免调试时受缓存干扰。

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