Flask-SocketIO结合Webpack：服务器消息无法回传至客户端

问题场景 #

开发环境下，通过FLASK_APP=web_server.py flask run --host=0.0.0.0启动Flask服务，服务器可正常接收客户端的HTTP及WebSocket消息，但触发事件后回传的消息无法被浏览器接收。前端Webpack开发服务器运行在3000端口，后端Flask服务端口为5001，怀疑Webpack代理配置或Flask启动方式导致问题。

现有配置 #

Webpack devServer配置 #

devServer: {
  host: 'localhost',
  port: port,
  host: '0.0.0.0',
  historyApiFallback: true,
  open: true,
  proxy: {
    '**': 'http://0.0.0.0:5001/'
  }
},

Flask后端配置 #

app = Flask(__name__)
cors = CORS(app, supports_credentials=True, resources={r"/*": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'
app.config['SECRET_KEY'] = os.environ['FLASK_LOGIN_SECRET_KEY']
socketio = SocketIO(app, cors_allowed_origins='*', async_mode='eventlet')
socketio.run(app, debug=True)

问题根源 #

1. Flask启动方式错误：使用flask run命令启动时，并未触发Flask-SocketIO的socketio.run()方法，导致eventlet异步模式未被正确启用，无法正常处理WebSocket消息的回传逻辑。
2. Webpack代理未支持WebSocket：默认的代理配置'**': 'http://0.0.0.0:5001/'未明确启用WebSocket代理，无法转发WebSocket的Upgrade请求，导致后端回传的WebSocket消息无法通过代理到达前端浏览器。
3. Webpack配置冗余：重复设置host属性，可能导致配置冲突。

解决步骤 #

1. 修正Flask启动方式 #

放弃flask run命令，直接运行web_server.py脚本，确保socketio.run()生效：

• 在web_server.py中明确指定服务地址和端口：

  socketio.run(app, debug=True, host='0.0.0.0', port=5001)
  

• 启动命令改为：python web_server.py

2. 调整Webpack代理配置，添加WebSocket支持 #

修改devServer配置，启用WebSocket代理并清理冗余配置：

devServer: {
  host: '0.0.0.0',
  port: 3000,
  historyApiFallback: true,
  open: true,
  proxy: {
    '**': {
      target: 'http://0.0.0.0:5001/',
      ws: true, // 启用WebSocket代理
      changeOrigin: true
    }
  }
},

3. 前端SocketIO连接配置 #

前端连接SocketIO时，使用Webpack devServer的地址（http://localhost:3000），而非直接连接后端5001端口，确保请求通过代理转发：

// 前端示例代码
import { io } from 'socket.io-client';
const socket = io('http://localhost:3000');

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