React应用经Nginx部署后仅返回空白页求助

1. 检查Nginx HTTP2与压缩配置冲突 #

Nginx启用HTTP2同时开启gzip/brotli压缩时，可能出现资源传输后解析异常。临时关闭压缩测试：

# 注释所有gzip相关配置
# gzip on;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

重启Nginx后刷新页面，若问题消失，再逐步调整压缩规则——比如排除.js/.css文件，或降低压缩级别。

2. 验证构建产物完整性 #

本地构建后上传服务器时，可能出现文件损坏。对比本地与服务器上核心文件的MD5值：

# 本地生成MD5
md5sum build/static/js/main.*.js
# 服务器端生成MD5
md5sum /path/to/nginx/html/static/js/main.*.js

若MD5不一致，用scp或rsync重新上传构建产物，避免用FTP的ASCII模式。

3. 修正静态资源响应头配置 #

HTTP2对缓存头和内容类型要求更严格，确保Nginx配置中静态资源的响应头正确：

location ~* \.(js|css|png|jpg|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header X-Content-Type-Options nosniff;
    # 强制指定Content-Type，避免浏览器误判
    types {
        application/javascript js;
        text/css css;
        image/png png;
        image/jpeg jpg;
        image/svg+xml svg;
    }
}

同时检查是否存在Content-Length与Transfer-Encoding同时返回的情况，HTTP2下这两个头不能共存。

4. 升级Nginx与优化SSL配置 #

老旧Nginx版本（低于1.10.0）的HTTP2实现可能存在bug，升级到1.24+稳定版。同时确保SSL配置符合HTTP2要求：

ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
ssl_prefer_server_ciphers off;

5. 强制指定React构建的资源路径 #

即便调整过homepage，仍可尝试用环境变量指定绝对路径构建：

# 替换为你的域名
PUBLIC_URL=https://your-domain.com npm run build

检查构建后的index.html，确认所有资源引用为绝对路径且可直接访问。

6. 清除浏览器HTTP2会话缓存 #

浏览器可能缓存了错误的HTTP2会话数据，尝试：

• 用隐私模式访问页面
• 清空浏览器缓存与Cookie
• Chrome中输入chrome://net-internals/#http2，重置HTTP2会话后再测试

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