Ubuntu下Nginx反向代理Flutter DevTools返回空白页问题

针对你遇到的域名访问Flutter DevTools空白、IP直连正常的问题，可从以下几个方向排查修复：

• 修正WebSocket代理头配置
  你的配置中固定设置Connection "Upgrade"会导致普通HTTP请求的连接头被强制修改，可能干扰静态资源加载。将其改为动态获取请求头：

  location / {
      proxy_pass http://localhost:9100;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $http_connection; # 替换固定值为动态变量
      proxy_set_header Host $host;
  }
  

• 补充SSL证书配置
  当前443端口的server块缺少SSL证书路径，Nginx无法正常提供HTTPS服务，可能导致浏览器静默处理SSL错误进而页面空白。添加Certbot生成的证书配置：

  server {
      server_name my.server.com;
      location / {
          # 保持原有代理配置
      }
      listen 443 ssl;
      ssl_certificate /etc/letsencrypt/live/my.server.com/fullchain.pem; # Certbot生成的证书路径
      ssl_certificate_key /etc/letsencrypt/live/my.server.com/privkey.pem; # Certbot生成的密钥路径
  }
  

• 确保DevTools监听所有网卡
  若DevTools仅绑定127.0.0.1，虽Nginx能访问，但可能无法正确处理域名请求。启动时指定监听所有地址：

  flutter pub global run devtools --host 0.0.0.0 --port 9100
  

• 添加代理辅助头信息
  补充转发真实客户端信息和协议的头，帮助DevTools正确识别请求来源：

  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_cache_bypass $http_upgrade;
  proxy_no_cache $http_upgrade;
  

• 检查Nginx错误日志
  浏览器DevTools无错误不代表Nginx无异常，查看日志定位问题：

  tail -f /var/log/nginx/error.log
  

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