React 和 Flask 与 Socket.IO - CORS 问题

Question

我正在尝试创建一个Flask 服务器（端口 5000），它与React 客户端（端口 3000）有一个 socket.io 连接。当我尝试执行服务器脚本（如下所示）时，我收到一条错误消息，指出“ http://localhost:3000 不是可接受的来源”，即使我使用的是 CORS。

服务器测试.py：

from flask import Flask
from flask_socketio import SocketIO, emit
from flask_cors import CORS, cross_origin

import os
from dotenv import load_dotenv, find_dotenv
load_dotenv(find_dotenv())

app = Flask(__name__)
app.config['CORS_HEADERS'] = 'Content-Type'
app.config['SECRET_KEY'] = os.environ.get('SECRET')
socketio = SocketIO(app)
CORS(app)

@socketio.on('connect')
@cross_origin()
def handle_connection():
  emit('server-client', 'Test message')


@socketio.on('client-server')
@cross_origin()
def handle_client_msg(msg):
  print("\n" + str(msg))


if __name__ == '__main__':
  app.run(host="localhost", port=os.environ.get('PORT'))
  socketio.run(app)

应用程序.jsx：

import { io } from 'socket.io-client';

// ...

useEffect(() => {
  const socket = io('http://localhost:5000');

  socket.on('server-client', msg => {
    alert(msg);
    socket.emit('client-server', 'Client: Message received!');
  });
}, []);

WSL 终端中的错误消息：

 * Serving Flask app 'server-test' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://localhost:5000/ (Press CTRL+C to quit)
http://localhost:3000 is not an accepted origin. (further occurrences of this error will be logged with level INFO)
127.0.0.1 - - [16/May/2021 00:27:31] "GET /socket.io/?EIO=4&transport=polling&t=NboMpZQ HTTP/1.1" 400 -
127.0.0.1 - - [16/May/2021 00:27:31] "GET /socket.io/?EIO=4&transport=polling&t=NboMpZS HTTP/1.1" 400 -
127.0.0.1 - - [16/May/2021 00:27:31] "GET /socket.io/?EIO=4&transport=polling&t=NboMpZR.0 HTTP/1.1" 400 -
127.0.0.1 - - [16/May/2021 00:27:31] "GET /socket.io/?EIO=4&transport=polling&t=NboMpZR HTTP/1.1" 400 -

Answer 1

Flask SocketIO 文档是这样说的：

如果传入的 HTTP 或 WebSocket 请求包含 Origin 标头，则此标头必须与连接 URL 的方案和主机匹配。如果不匹配，则会返回 400 状态代码响应并拒绝连接。

和这个：

如有必要，可以使用 cors_allowed_origins 选项来允许其他来源。可以将此参数设置为字符串以设置单个允许的来源，或设置为列表以允许多个来源。特殊值“*”可用于指示服务器允许所有来源，但应谨慎执行此操作，因为这可能会使服务器容易受到跨站点请求伪造 (CSRF) 攻击。

所以代替这个：

socketio = SocketIO(app)

你可以这样做：

socketio = SocketIO(app, cors_allowed_origins="*")

与 cors 问题无关，但我还在函数中添加了 return 语句。没有返回我得到的东西：

类型错误：视图函数未返回有效响应。

如果使用装饰器似乎是必需的@cross_origin()，因此您也可以删除它们，然后就不需要 return 语句。