Create React App中Nginx配置Service Worker无缓存遇404问题求助

首先咱们得先抓住核心：你当前遇到的404错误说明Nginx根本没找到service-worker.js文件，缓存头配置是其次的——得先搞定文件的存在性和路径匹配问题，再谈缓存策略。下面一步步来排查解决：

1. 先确认Service Worker文件是否真的存在 #

Create React App有个关键细节：开发模式（npm start）下默认不会生成service-worker.js，只有当你执行npm run build构建生产环境包后，才会在项目根目录的build/文件夹下生成这个文件。如果你是直接跑开发服务器就想测试Service Worker，肯定会报404。

2. 检查Nginx的Root路径配置是否正确 #

你的Nginx配置里，location /service-worker.js的匹配前提是，Nginx的root指令必须指向CRA构建后的build目录。给你一个基础的正确配置参考：

server {
  listen 80;
  server_name your-domain.com;

  # 核心：root要指向CRA build完成后的文件夹
  root /absolute/path/to/your/react-app/build;
  index index.html;

  # 处理React单页应用的路由刷新404问题
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 你的Service Worker缓存策略配置
  location /service-worker.js { 
    add_header Cache-Control "no-cache"; 
    proxy_cache_bypass $http_pragma; 
    proxy_cache_revalidate on; 
    expires off; 
    access_log off; 
  }
}

如果root路径写错了，Nginx会去错误的目录找文件，自然返回404。

3. 确认应用部署路径是否匹配 #

如果你的React应用部署在域名的子路径下（比如your-domain.com/my-app/），需要在项目的package.json里添加"homepage": "/my-app/"。这样CRA构建时会自动调整service-worker.js的路径，确保Nginx能正确匹配到它。

4. 验证Nginx配置并测试 #

修改完Nginx配置后，一定要先检查语法是否正确，再重新加载配置：

sudo nginx -t  # 检查配置语法
sudo systemctl reload nginx  # 重新加载生效

之后可以用curl直接测试文件是否能访问：

curl -I http://your-domain.com/service-worker.js

如果返回200状态码，说明文件已经能被找到，再看返回头里的缓存配置是否符合预期。

额外：开发模式下测试Service Worker的小技巧 #

如果想在开发环境测试Service Worker，需要两步：

• 在src/index.js里把serviceWorkerRegistration.unregister()改成serviceWorkerRegistration.register()
• 用HTTPS启动开发服务器（Service Worker要求安全上下文）：HTTPS=true npm start

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