Flutter Web + Flask-SocketIO + Docker Compose环境下，无法通过Nginx反向代理连接WebSocket

我明白你现在遇到的痛点——本地单独跑前后端时WebSocket能正常连接，但一放到Docker Compose里通过Nginx反向代理就彻底没动静，连错误日志都找不到，确实头大。我帮你梳理下问题所在和解决办法：

1. 核心问题：Nginx的WebSocket代理配置缺失 #

你当前的Nginx配置里，/socket.io的location块是空的，而WebSocket请求需要Nginx做特殊的协议转发处理（HTTP Upgrade机制），没有这些配置的话，Nginx根本不会把WebSocket请求正确转发到后端服务。

修正后的完整Nginx配置 #

把你的nginx.conf里的/socket.io location块替换成下面的内容：

location /socket.io {
    proxy_pass http://backend_server/socket.io;
    proxy_http_version 1.1;
    # 必须的WebSocket协议升级头
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    # 传递客户端真实IP和主机头
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 调整超时时间，避免WebSocket连接被Nginx主动断开
    proxy_connect_timeout 7d;
    proxy_send_timeout 7d;
    proxy_read_timeout 7d;
}

关键参数说明：

• proxy_http_version 1.1：WebSocket依赖HTTP/1.1的Upgrade机制，必须开启
• Upgrade和Connection头：告诉Nginx这是一个需要升级到WebSocket协议的请求
• 长超时设置：默认Nginx的代理超时比较短，会导致WebSocket连接被意外断开，设置长超时避免这个问题

2. 前端连接代码的调试与完善 #

你的connectAndWait方法里用了Completer但没有触发完成/失败回调，这会导致你完全不知道连接是否成功或失败。另外，建议加上事件监听来排查问题：

Future<void> connectAndWait() {
  final completer = Completer<void>();
  // 确保url是"/socket.io"，因为Nginx已经代理到后端
  final url = "/socket.io";
  socket = socket_io.io(url, <String, dynamic>{
    'transports': ['websocket'],
    'autoConnect': false,
    // 加上这个，避免跨域相关的隐性问题
    'withCredentials': true,
  });

  // 监听连接成功事件
  socket.onConnect((_) {
    print("WebSocket连接成功！");
    completer.complete();
  });

  // 监听连接失败事件，这能帮你看到真实的错误
  socket.onConnectError((error) {
    print("WebSocket连接失败：$error");
    completer.completeError(error);
  });

  socket.connect();
  return completer.future;
}

小提示：加上withCredentials: true可以避免一些隐性的跨域Cookie/凭证问题，虽然你说没有CORS错误，但加上更稳妥。

3. 后端与Docker Compose的注意事项 #

• Flask-SocketIO的CORS配置：确保你的CORS配置允许WebSocket请求，比如：

  from flask_cors import CORS
  from flask_socketio import SocketIO
  
  app = Flask(__name__)
  # 允许所有来源的CORS请求（生产环境建议指定具体域名）
  CORS(app, resources={r"/api/*": {"origins": "*"}, r"/socket.io/*": {"origins": "*"}})
  socketio = SocketIO(app, async_mode='threading', cors_allowed_origins="*")
  

• Docker Compose端口映射：确保前端Nginx服务的端口映射正确（比如你提到的5200），后端服务backend的5300端口不需要暴露给主机（因为Nginx会通过Docker内部网络访问），但要确保服务名和Nginx里的upstream backend_server的backend一致。
• Async_mode的选择：用threading是没问题的，但如果后续有性能需求，换成eventlet或gevent时，要确保安装对应的依赖（比如eventlet需要pip install eventlet）。

4. 验证方法 #

修改配置后，重新构建Docker镜像并启动服务：

1. 重启Docker Compose：docker-compose down && docker-compose up --build
2. 打开前端页面，打开浏览器DevTools的Network标签，过滤WS类型的请求，你应该能看到/socket.io/?EIO=4&transport=websocket的请求，状态码是101（Switching Protocols）
3. 后端控制台也会输出WebSocket连接成功的日志（如果你开了调试日志的话）

内容来源于stack exchange