React and Flask with Socket.IO - CORS problem

Question

我正在尝试制作一个Flask服务器(端口5000(，该服务器具有与React客户端的socket.io连接(端口3000(。当我尝试执行服务器脚本(如下所示(时，我得到一个错误，上面写着">http://localhost:3000不是可接受的来源"；即使我正在使用CORS。

server-test.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)

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问题无关，但我也向函数添加了返回语句。没有归还我得到的东西：

TypeError:视图函数未返回有效响应。

如果使用@cross_origin()装饰符，似乎是必需的，所以您也可以删除这些装饰符，然后就不需要返回语句了。