Flask-SocketIO and 400 Bad Request

Question

I'm running a Flask application with socketio to deal with notifications. The Flask app is listening at port 5000 and the client is in 8080.

the js client is always getting this error:

VM15520:1 GET http://localhost:5000/socket.io/?EIO=3&transport=polling&t=Mb2_LpO 400 (Bad Request)
Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=3&transport=polling&t=Mb2_LpO' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm actually starting my app with gunicorn as follows:

gunicorn --workers=1 --worker-class eventlet --certfile=keys/key.crt --keyfile=keys/key.key --bind 0.0.0.0:5000 myapp.run:app

and this is my run.py:

import eventlet
from myapp import create_app
eventlet.monkey_patch()
app, celery = create_app('config_prod.py')

I'm also using CORS(app) in my app factory.

I also tried adding this in one of my blueprints:

@api.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin', 'http://localhost:8080')
    response.headers.add('Access-Control-Allow-Headers',
                         'Origin, X-Requested-With, Content-Type, Accept, Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
    response.headers.add('Access-Control-Allow-Credentials', 'false')
    return response

I'm using nginx as a reverse proxy, and so I tried adding the corresponding configuration I've seen at flask-socketio's docs:

location /socket.io {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass https://my_backend_host/socket.io;
}

What's wrong? Thanks!

Curricle

The server’s responding with a 400 Bad Request error because the request your frontend JavaScript code is sending isn’t in the format the server expects. Check the server logs to see what messages the server is logging that end up causing it to respond with that 400 error. – Mcclinton

It’s weird for a server to respond to a GET request with a 400 error; a 400 is much more common for a POST request that sends data in some unexpected format. So a 400 response to a GET request mostly likely indicates some misconfiguration in your server. Regardless, it has nothing to do with your CORS configuration. The only reason you get an additional error message mentioning “CORS policy” is that the server doesn’t add the Access-Control-Allow-Origin to 400 error responses but instead only adds that header to 200 OK success messages. – Mcclinton

I see, in any case the server doesn't show any error, only at nginx logs I see the same error it's shown in the ui "GET /socket.io/?EIO=3&transport=polling&t=Mb3FVjC HTTP/1.1" 400 657 – Curricle

I guess you might want to consider looking through search results for something ilke “socket io 400 bad request” or something; google.co.jp/search?q=socket+io+400+bad+request – Mcclinton

Answer 1

I got similar 400 issue with React Flask-SocketIO, the issue was due to CORS error. The following code in flask fixed my issue,

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

Also make sure you are using eventlet or gevent-websocket in your server when you select [websocket] only transport. Gevent doesnt have websocket support so works only with HTTP polling fallback.

Oar

Answer 2

The problem was that I was adding the origin host with http instead of https. Everything is working fine.

Curricle

Thanks, I just got this error, add this line to nginx config to remove Origin header: proxy_set_header Origin ""; – Bandsman

That moment when a comment on a (previously) downvoted post is actually very useful. – Sapphera

Answer 3

I fixed it by add this line to the nginx.conf:

proxy_set_header Origin  "";  

Termagant