Flask-SocketIO无法设置Access-Control-Allow-Origin响应头的解决方法

我之前也碰到过一模一样的问题！别着急，Flask-SocketIO的跨域配置和普通Flask应用的CORS设置逻辑不太一样，咱们一步步来解决：

问题根源 #

你提到的flask-CORS其实只对Flask的常规HTTP请求生效，但SocketIO的连接（不管是WebSocket握手还是XHR轮询）是由SocketIO自身处理的，所以用flask-CORS配置不会影响SocketIO的跨域行为。另外，虽然文档说cors_allowed_origins默认允许所有源，但在一些特殊场景（比如从file://协议页面发起请求）下，浏览器会把源识别为null，这时候默认配置可能没生效。

正确解决方案 #

直接在初始化SocketIO实例时显式配置cors_allowed_origins参数即可：

1. 允许所有跨域源（开发环境推荐）

修改你的代码：

from flask import Flask
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecret'
# 显式设置允许所有跨域源
socketio = SocketIO(app, cors_allowed_origins="*")

@socketio.on('message')
def handle_message(msg):
    print('Message:' + msg)
    send(msg, broadcast=True)

if __name__ == '__main__':
    socketio.run(app)

2. 允许特定跨域源（生产环境推荐）

如果是生产环境，建议指定具体的允许源，比如前端部署在http://your-frontend-domain.com：

socketio = SocketIO(app, cors_allowed_origins="http://your-frontend-domain.com")

3. 带凭证的跨域请求

如果你的应用需要传递Cookie或HTTP认证信息，还需要开启cors_credentials参数：

socketio = SocketIO(app, cors_allowed_origins="http://your-frontend-domain.com", cors_credentials=True)

验证修改 #

重启Flask服务后，再打开Chrome的网络分析工具，查看SocketIO连接请求的响应头，Access-Control-Allow-Origin应该会显示你设置的值（*或指定的域名），这时候跨域请求就能正常工作了。

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