Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何从react允许python中的cors源策略_Reactjs_Flask_Socket.io_Cors_Flask Cors - Fatal编程技术网

Reactjs 如何从react允许python中的cors源策略

Reactjs 如何从react允许python中的cors源策略,reactjs,flask,socket.io,cors,flask-cors,Reactjs,Flask,Socket.io,Cors,Flask Cors,这是我的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": "*"}}) # soc

这是我的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.
我的react代码如下所示:

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

请参阅:

我已经从python端处理了cors错误。检查一下。