Flask-socketio: CORS not working

[alexpana]

I'm trying to connect to socketio from the create-react-app dev server, but the flask server isn't returning Access-Control-Allow-Origin: *.

Here is the request from the create-react-app server (running on port 3000):

And here is the request from a html file served by flask:

Opening the html file locally (with file:///.../index.html) doesn't work either.

Is this the intended behavior? How can I get flask to play nice with other servers?

[miguelgrinberg]

The two screenshots that you shared are for Socket.IO requests, I don't see any being for a HTML file. Note that both show a URL that begins with http://localhost:5000/socket.io/....

How did you initialize the SocketIO extension? The lack of CORS headers in the first screenshot make me think you are using a non-default configuration for CORS.

[alexpana]

Thank you for the reply, I'll do my best to clarify.

The two screenshots that you shared are for Socket.IO requests, I don't see any being for a HTML file.

The second screenshot is a Socket.IO request from a html file served by flask. The first is being made from a html file served by a node dev server. Notice the difference in the Host header.

How did you initialize the SocketIO extension?

in gizmo/gizmo/__init__.py I have

socketio = SocketIO()
def create_app():
    ...
    socketio.init_app(app, cors_allowed_origins="*")

and then in gizmo/run.py I have:

from gizmo import create_app, socketio

app = create_app()

if __name__ == '__main__':
    socketio.run(app, host="localhost")

I run the server with python run.py

[miguelgrinberg]

This is the documentation for the cors_allowed_origins setting:

cors_allowed_origins – List of origins that are allowed to connect to this server. All origins are allowed by default.

If you want to allow all origins, do not include this setting, or set it to None. If you want to allow specific origins, provide a list of those origins in this argument. You are setting the argument to *, which is not an allowed value.

[alexpana]

Removing the cors_allowed_origins='*' parameter worked, thank you very much.

However, I did read the documentation sever times, and I still find the description lacking. Setting '*' as wildcard for allowed origins is very common, and even Flask-CORS allows it. I think being invalid for socketio is counter intuitive, and should at least be mentioned in the docs.

The reason people would choose to set it despite it being default is because a) defaults can change (although this might break quite a lot of apps) and b) it's explicit (explicit is better than implicit, as the zen goes).

[miguelgrinberg]

@alexpana I actually followed your advice and expanded the cors_allowed_origins a bit. You can now set it to '*' or None (or omit it) to allow all origins. You can also set it to a string to allow a single origin, or set it to a list of strings if you have more than one allowed origin. Thanks!

Commit: https://github.com/miguelgrinberg/python-engineio/commit/8f3d6ecff45d474da1a407d654d06fd3f8f882a8

[alexpana]

That's awesome, thank you!