无法将 React 前端连接到服务器端 Flask-socket.io，CORS 错误

Question

这个问题特别，以前也问过很多类似的问题，但这些解决方案对我不起作用，所以我再次发布这个问题

React前端前端日志：

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NOaQQ2g' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NOaQDio net::ERR_FAILED

python flask_socketio后端日志：

"GET /socket.io/?EIO=4&transport=polling&t=NOaQQ2g HTTP/1.1" 400 -

后端代码：

from flask import Flask, render_template
from flask_socketio import SocketIO
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app,cors_allowed_origins="*")
if __name__ == '__main__':
socketio.run(app)

前端代码：

import './App.css';
import { io } from 'socket.io-client';
const socket = io('http://localhost:5000');
socket.on('connect', () => {
console.log(socket.connected);
})
function App() {
return (
<div className='App'>
<h1>test</h1>
</div>
);
}
export default App;

我尝试过的解决方案，

使用flask_cors库

将cors_allowed_origins设置为"*"OR"；http://localhost"OR"；http://localhost:3000">

Answer 1

我也遇到了同样的问题，发现将客户端React socket.io-client恢复到2.3.0版本就成功了。

因此，卸载socket.io-client:

yarn remove socket.io-client

然后安装旧版socket.io-client:

yarn add socket.io-client@2.3.0

然后在您的React客户端js:中

import io from 'socket.io-client';
const socket = io('http://localhost:5000');