时间戳

首页 > 解决方案 > 无法将 React 前端连接到服务器端 Flask-socket.io，CORS 错误

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

问题描述

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

反应前端前端日志：

 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”

标签： reactjsflasksocket.io

解决方案

我遇到了同样的问题，发现将客户端 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');

推荐阅读