Nginx代理React应用出现ERR_INCOMPLETE_CHUNKED_ENCODING问题排查

问题背景 #

开发Telegram网页应用，Docker容器构建运行后出现以下异常：

• PC端访问正常，但手机端Telegram应用报脚本错误
• 尝试降级Webpack、更新Docker内Node版本后，域名（HTTP/HTTPS）访问浏览器失效，但主机IP/localhost访问正常
• 浏览器控制台固定报错：

GET http://www.{{domain}}/static/js/bundle.js 
net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)

• 其他代理路径（如/create/、/parser/）均正常，回滚所有更改后问题仍存在

当前Nginx配置 #

server {
        listen 80;
        listen [::]:80;

        server_name {{domain}} www.{{domain}};

        location / {
            proxy_pass http://localhost:9040/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /parser/ {
            proxy_pass http://localhost:9010/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /provider/ {
            proxy_pass http://localhost:9001/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /create/ {
            proxy_pass http://localhost:9003/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        listen [::]:443 ssl; # managed by Certbot
        listen 443 ssl; # managed by Certbot

        ssl_certificate /etc/letsencrypt/live/{domain}/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/{domain}/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

可能的原因及排查方向 #

1. Nginx代理分块传输异常 #

ERR_INCOMPLETE_CHUNKED_ENCODING本质是分块传输时数据中断，大概率是Nginx与后端9040端口服务的传输问题：

• 检查后端服务是否在返回bundle.js时提前断开连接，比如内存不足、进程异常退出
• 在location /块中添加代理缓冲配置，让Nginx完整接收后端响应后再转发给客户端，避免分块传输中断：

  proxy_buffering on;
  proxy_buffer_size 4k;
  proxy_buffers 8 4k;
  proxy_set_header Connection "";
  

2. 域名层缓存/解析问题 #

• 域名可能被CDN、浏览器缓存或本地DNS劫持，导致bundle.js的缓存版本损坏。尝试强制刷新浏览器缓存（Ctrl+F5），切换不同网络环境测试域名访问
• 检查域名DNS解析记录，确认没有异常的CNAME或跳转节点导致传输中断

3. HTTPS与HTTP混合内容冲突 #

当前配置未做HTTP到HTTPS的重定向，可能引发混合内容问题：

• 手机端Telegram内置浏览器对HTTPS兼容性要求更高，如果页面通过HTTPS加载，但bundle.js请求走HTTP（如报错中的http://www.{{domain}}），会触发安全限制甚至中断传输
• 拆分HTTP监听配置，单独做重定向：

  server {
      listen 80;
      listen [::]:80;
      server_name {{domain}} www.{{domain}};
      return 301 https://$host$request_uri;
  }
  

  原server块仅保留HTTPS相关配置，避免同一块同时处理HTTP/HTTPS导致的逻辑混淆

4. Docker与主机的网络隔离问题 #

• 主机IP访问正常，但域名访问时Nginx代理到localhost:9040可能存在Docker网络隔离问题。尝试将proxy_pass中的localhost替换为主机内网IP（如192.168.x.x:9040），避免容器与主机的localhost解析差异
• 检查Docker端口映射规则，确认9040端口已正确对外开放，未被其他进程占用

5. Webpack资源路径硬编码问题 #

• 即使回滚了更改，可能构建产物中bundle.js的引入路径硬编码了HTTP协议，导致HTTPS页面加载HTTP资源被拦截。检查Webpack的publicPath配置，使用相对路径或协议无关路径：

  // webpack.config.js
  module.exports = {
    output: {
      publicPath: '/static/' // 相对路径，避免硬编码HTTP/HTTPS
    }
  }
  

内容的提问来源于stack exchange，提问作者Владислав Лапшин