Fixed CORS issue at localhost

README.md

@@ -1,8 +1,11 @@
 # react-flask-socketio
 This is a base code for testing websocket connection between python flask with socketio as Server and react Webapp as client
 
-Run server.py (localhost:5000) <br />
-Go to socketapp, Open CMD and type "npm start" <br />
+Run `pip install -r requirements.txt` under root folder <br />
+Run `python server.py` (localhost:5000) <br />
+
+Go to socketapp and open CMD, then run `npm install` <br />
+Type `npm start` <br />
 The data sent from python server is being displayed in the browser <br />
 Click on "Start/Stop" to start or stop sending data from the server <br />
 
@@ -14,4 +17,6 @@ Requires Python 3+
 npm i socket.io-client <br />
 
 pip install Flask-SocketIO <br />
-pip install gevent-websocket
+pip install gevent-websocket
+
+Please pay attention to socketio version if you get any issues like "http://localhost:3000 is not an accepted origin Access to XMLHttpRequest at 'http://localhost:5001/socket.io/?EIO=3&transport=polling&t=NY2-yMT' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. index.js:83 GET http://localhost:5001/socket.io/?EIO=3&transport=polling&t=NY2-yMT net::ERR_FAILED"

requirements.txt

@@ -0,0 +1,3 @@
+gevent-websocket
+flask-cors
+flask-socketio

server.py

@@ -10,7 +10,8 @@
 
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'secret!'
-socketio = SocketIO(app)
+app.config['CORS_HEADERS'] = 'Content-Type'
+socketio = SocketIO(app, cors_allowed_origins='*')
 CORS(app)
 # Server functionality for receiving and storing data from elsewhere, not related to the websocket
 #Data Generator Thread