AngularJS与Flask-Socketio的Access-Control-Allow-Origin错误求助

这个问题的核心在于Socket.IO连接默认会携带凭证（如Cookies、HTTP认证信息），而当请求的credentials模式为include时，浏览器不允许服务器用通配符*作为Access-Control-Allow-Origin的值，必须指定具体的源地址，同时还要显式开启凭证允许。

而且你之前用的flask_cors对Flask-SocketIO的路由无效——因为SocketIO的请求是由它自身的处理逻辑接管的，不属于Flask原生路由，所以得用SocketIO自带的CORS配置项来解决。

解决方案步骤： #

1. 服务器端（Flask-SocketIO）配置

修改你的Flask-SocketIO初始化代码，指定允许的源地址并开启凭证支持：

from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
# 配置允许的源为你的Angular客户端地址，同时开启凭证
socketio = SocketIO(
    app,
    cors_allowed_origins="http://localhost:3000",
    allow_credentials=True
)

# 示例SocketIO连接事件
@socketio.on('connect')
def handle_client_connect():
    print("客户端已连接")

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

如果需要允许多个客户端源，可以把cors_allowed_origins设为列表：

cors_allowed_origins=["http://localhost:3000", "http://your-other-domain.com"]

2. 客户端（AngularJS）配置

在创建SocketIO连接时，显式设置withCredentials: true：

// 在你的Angular控制器中
var socket = io.connect('http://localhost:5000', {
    withCredentials: true
});

为什么之前的flask_cors没用？ #

Flask-CORS是针对Flask原生路由的CORS处理，但Flask-SocketIO的请求（比如/socket.io/开头的连接请求）是由SocketIO的底层引擎处理的，不会经过Flask的路由系统，所以flask_cors的规则无法覆盖这些请求，必须用SocketIO自身的CORS参数来配置。

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