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

【问题标题】：Can't connect React frontend to server side Flask-socket.io, CORS ERROR无法将 React 前端连接到服务器端 Flask-socket.io，CORS 错误
【发布时间】：2020-12-02 17:14:36
【问题描述】：

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

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 设置为“*”或“http://localhost”或“http://localhost:3000”

【问题讨论】：

标签： reactjs flask socket.io

【解决方案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');

【讨论】：