使用Nginx搭配SSL证书部署静态React应用后非首页页面空白的问题排查

我之前也碰到过几乎一模一样的问题！结合你的配置和症状来看，问题大概率出在HTTPS环境下React路由与Nginx配置的冲突，还有可能是SSL附带的安全规则或浏览器缓存干扰了路由 fallback。下面是一步步的排查和解决步骤：

1. 移除多余的反向代理指令 #

你的Nginx配置里加了一堆proxy_*开头的指令，但这些是给反向代理到Node.js后端或者WebSocket服务用的——而你现在是直接静态托管React的build文件，完全不需要这些指令！这些多余的配置会干扰Nginx的静态文件路由规则，导致除了根路径外的其他React路由无法正确fallback到index.html。

修改后的location /块应该是这样的：

location / {
    root /var/www/mydomain;
    index index.html index.htm;
    # 只保留静态服务和React路由fallback的核心规则
    try_files $uri $uri/ /index.html;
}

2. 检查Certbot生成的SSL配置是否有干扰 #

Certbot自动添加的options-ssl-nginx.conf里可能包含了严格的缓存策略或者安全头，比如Strict-Transport-Security（HSTS）或者强缓存规则，导致浏览器缓存了旧的HTTP路由状态，或者阻止了路由跳转。

可以先临时注释掉这一行测试：

# include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot

如果注释后问题解决，再打开这个文件，调整里面的缓存规则——尤其是针对index.html要禁用缓存，避免浏览器缓存旧的路由入口：
在你的server块里添加：

location = /index.html {
    root /var/www/mydomain;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

3. 强制清除浏览器缓存 #

因为你刚从HTTP切换到HTTPS，Chrome、Firefox等浏览器可能缓存了旧的HTTP资源或路由规则，而Safari的缓存策略相对宽松所以不受影响。请用以下方式强制清除缓存：

• Windows/Linux：Ctrl + Shift + R
• Mac：Cmd + Shift + R
  或者直接用隐私/无痕窗口测试，确认是否是缓存问题。

4. 确认React路由模式 #

如果你用的是BrowserRouter（推荐的路由模式），那Nginx的try_files $uri $uri/ /index.html;是正确的；如果之前不小心改成了HashRouter，虽然也能工作，但没必要——不过根据你HTTP下正常的情况，这个应该没问题，还是优先检查前面的配置。

修改完配置后，记得重启Nginx生效：

sudo systemctl restart nginx

按照这个步骤调整后，应该就能解决除Safari外其他浏览器页面空白的问题了！

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