Docker容器中Flask与React的WebSocket连接失败问题排查

问题现象 #

• 所有API调用正常，但WebSocket连接失败
• 进入React容器内部测试时，能正常与Flask建立WebSocket连接，但本地浏览器访问React应用时连接失败
• Flask已配置全局CORS允许所有源
• React代码中使用Docker服务名称pythonapp-dev访问Flask服务器
• 容器外运行时，API与WebSocket功能均正常
• 已尝试创建自定义Docker网络
• 已关闭MacBook防火墙

浏览器报错信息 #

Cross-Origin Request Blocked: 
The Same Origin Policy disallows reading the remote resource at 
http://pythonapp-dev:7784/socket.io/?EIO=4&transport=polling&t=lb67pv7p. 
(Reason: CORS request did not succeed). Status code: (null).

Connection error: Error: xhr poll error
    TransportError transport.js:7
    onError transport.js:39
    doPoll polling-xhr.js:55
    emit index.js:136
    _onError polling-xhr.js:161
    onreadystatechange polling-xhr.js:135
CertiTesterDevicePage.jsx:30:48

核心原因 #

1. 浏览器无法识别Docker内部服务域名：pythonapp-dev是Docker Compose内部网络的服务名称，仅容器间可解析，本地浏览器无该域名的DNS记录，导致请求无法送达Flask服务。
2. WebSocket请求未走Vite代理：API请求通过Vite的/api代理转发到Flask，而WebSocket请求直接用pythonapp-dev:7784发起，既未经过代理，又无法被浏览器解析，最终触发跨域错误。

解决方案 #

1. 扩展Vite代理配置，支持Socket.io路径 #

在现有Vite配置中新增/socket.io路径的代理规则，开启WebSocket支持：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://pythonapp-dev:7784',
        changeOrigin: true,
        secure: false
      },
      // 添加Socket.io代理配置
      '/socket.io': {
        target: 'http://pythonapp-dev:7784',
        changeOrigin: true,
        secure: false,
        ws: true // 启用WebSocket代理
      }
    },
  },
})

2. 修改React组件的Socket连接地址 #

将绝对地址改为相对路径，让请求自动走Vite代理：

// 原代码
// const socket = io('http://pythonapp-dev:7784');

// 修改后代码
const socket = io(); // 默认连接当前域名（即Vite开发服务器地址）
socket.on('connect', () => console.log('Connected:', socket.id));
socket.on('connect_error', (err) => console.error('Connection error:', err));

3. 确认Flask启动配置有效性 #

确保Gunicorn使用eventlet worker启动（Flask-SocketIO要求的异步worker），当前docker-compose命令已正确配置：

command: sh -c "sleep 10s; python3 certi_tester/send_data.py & sleep 30s; gunicorn -w 1 -k eventlet -b 0.0.0.0:7784 app:app"

验证步骤 #

1. 重启Docker Compose服务：docker-compose down && docker-compose up --build
2. 本地浏览器访问http://localhost:5173
3. 查看浏览器控制台，确认WebSocket连接成功日志输出

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