使用Flask-SocketIO时客户端CORS配置导致连接被拒绝问题

问题原因 #

你在客户端的Flask应用中配置了flask_cors，但这个配置只对普通HTTP请求生效。SocketIO的连接有独立的跨域处理机制，必须在SocketIO服务器端配置允许跨域的源，否则来自localhost:8080的客户端连接会被拒绝。

解决步骤 #

修改SocketIO服务器的初始化代码，添加cors_allowed_origins参数，指定允许的客户端域名：

修改后的服务器代码 #

from flask import Flask
from flask_socketio import SocketIO
from flask_socketio import send

app = Flask(__name__)
# 允许来自localhost:8080的跨域连接，本地测试也可以用"*"允许所有源
socketio = SocketIO(app, cors_allowed_origins="http://localhost:8080")

@socketio.on('connect')
def on_connect():
    print('client connected.')

@socketio.on('message')
def handle_message(data):
    print('received a message: ' + data)
    send(f'thanks for sending your message: {data}, i ack it.')

if __name__ == '__main__':
    socketio.run(app, host='localhost', port=5000, debug=True)

额外说明 #

• 本地测试阶段，为了方便可以将cors_allowed_origins设为"*"，允许所有域名的连接；但生产环境必须指定具体的可信域名，避免安全风险。
• 修改完成后，重启SocketIO服务器和客户端Flask服务，访问http://localhost:8080/test即可正常建立WebSocket连接，服务器控制台会输出client connected.。

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