求助：React应用经Nginx/Docker部署后正常浏览器显陈旧JS/CSS，隐身模式正常

问题核心 #

Docker容器内的Nginx已配置正确的Cache-Control头部，但外层反向代理Nginx会剥离/覆盖该头部，导致浏览器缓存旧的JS/CSS资源——表现为正常窗口显示陈旧内容，隐私/隐身窗口因无缓存能加载最新版本。

已尝试操作 #

• 清除浏览器缓存（强制刷新、清空开发者工具缓存）
• 隐私/隐身模式测试（可正常加载最新React构建版本）
• 清除服务器Nginx缓存（但服务器Nginx仅作反向代理，未启用缓存）
• 更新Docker内React应用的Nginx配置中的Cache-Control头部

当前现象 #

• 部分更新后的JS文件可正常加载
• 仍有部分旧JS文件被返回
• 部分CSS变更生效，但仍有部分加载陈旧版本

解决方案 #

1. 配置外层Nginx保留后端传递的Cache-Control头部 #

在外层Nginx的反向代理配置块中，添加指令确保后端返回的缓存头部完整传递给浏览器，同时避免外层Nginx自行设置缓存头部覆盖后端配置：

location / {
    proxy_pass http://your-docker-container-ip:port;
    # 保留后端的缓存相关头部
    proxy_pass_header Cache-Control;
    proxy_pass_header Expires;
    proxy_pass_header Pragma;
    
    # 禁止外层Nginx主动设置缓存头部（若之前有相关配置需删除）
    proxy_set_header Cache-Control "";
}

如果外层Nginx单独配置了静态资源缓存规则（如location ~* \.(js|css)$），需移除其中的expires或add_header Cache-Control指令，避免覆盖后端配置。

2. 确保React构建生成带哈希的静态资源文件名 #

React官方脚手架（create-react-app）或Vite等工具默认会给生产构建的JS/CSS文件添加内容哈希（如main.7a3b2c.js），新版本资源文件名会随内容变化，即使浏览器缓存旧文件，新的index.html会引用新文件名资源，浏览器会自动请求新内容：

• 执行npm run build后，检查build（或dist）目录下的静态资源文件名是否包含哈希字符串
• 若自定义Webpack配置，需确保开启文件名哈希：

  // webpack.config.js
  module.exports = {
    output: {
      filename: '[name].[contenthash].js',
      chunkFilename: '[name].[contenthash].chunk.js'
    }
  }
  

3. 单独配置index.html的无缓存策略 #

index.html作为应用入口，必须确保浏览器每次请求都获取最新版本，避免因缓存导致引用旧资源路径。在外层Nginx中添加：

location = /index.html {
    proxy_pass http://your-docker-container-ip:port;
    # 强制禁止缓存index.html
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

4. 验证配置有效性 #

部署后用浏览器开发者工具网络面板检查：

• JS/CSS文件的Cache-Control是否匹配Docker内Nginx的配置（如public, max-age=31536000, immutable）
• index.html的响应头部是否包含no-cache类的禁止缓存指令

临时验证方案 #

若配置后仍有残留缓存，可按Ctrl + Shift + R（Windows/Linux）或Cmd + Shift + R（Mac）强制刷新浏览器，强制重新获取所有资源。

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