如何允许python-flask socketio中的cors起源策略从react开始

Question

这是我的server.py文件。我使用了socketio从react应用程序调用。

async_mode = None
app = Flask(__name__)
app.debug = True
app.config['SECRET_KEY'] = 'nuttertools'
Session(app)
CORS(app)
cors = CORS(app, resources={r"*": {"origins": "*"}})
# socketio = SocketIO(app, manage_session=False, async_mode=async_mode)
socketio = SocketIO(app, manage_session=False, async_mode=async_mode, cors_allowed_origins='*')
@socketio.on('message', namespace='/chat')
def chat_message(message):
print("message =!! ", message)
test_message = message
print("test message ", test_message)
emit('message', {'data': test_message['data']}, broadcast=False)
if __name__ == '__main__':
socketio.run(app, host=host, port=port, debug=True)

但是当我从react应用程序调用这个socketio时，我会得到以下错误。

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

我的反应代码如下：

const serverHost = window.location.hostname;
const serverPort = 5003;
const serverUrl = `http://${serverHost}:${serverPort}/chat`;
console.log(serverUrl);
class App extends Component {
constructor(props) {
super(props);
// this.completeChange = this.completeChange.bind(this);
this.state = {
userMessage: '',
conversation: [{
text: "Please enter your mobile number",
user: 'ai',
}],
socket: io(serverUrl),
childVisible: false,
show: false,
selectedValue: undefined,
radioOptions: [],
headerControler: false,
mobileNoTaken: false
};
}

如何解决corse origin策略错误？

Answer 1

Cors错误可以像一样处理

const io = require("socket.io")(httpServer, {
origins: ["https://example.com"],
// optional, useful for custom headers
handlePreflightRequest: (req, res) => {
res.writeHead(200, {
"Access-Control-Allow-Origin": "https://example.com",
"Access-Control-Allow-Methods": "GET,POST",
"Access-Control-Allow-Headers": "my-custom-header",
"Access-Control-Allow-Credentials": true
});
res.end();
}
});

参考：插座cors处理