如何在反应中允许 python flask socketio 中的 cors-origin-policy

问题描述

这是我的 server.py 文件。我已经使用 socketio 从反应应用程序调用。

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,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 源策略错误？

解决方法

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();
  }
});

参考：Socket-cors-handling