Flask-socketio: cross origin issue :No 'Access-Control-Allow-Origin' header is present on the requested resource.

Created on 28 Nov 2016  路  8Comments  路  Source: miguelgrinberg/Flask-SocketIO

I am getting following error:
XMLHttpRequest cannot load http://sub.domain.com:8001/socket.io/?EIO=3&transport=polling&t=LYiR26U&sid=a2e287f20e944e37838d88b5bb5d4f81. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

I have set up CORS on server side as follows:

app = Flask(__name__)
app.config['SECRET_KEY'] = 'AFWRDQHRJHQDNADNQBE'
cors = CORS(app,resources={r"/socket.io/*":{"origins":"*"}})
socketio = SocketIO(app, async_mode=async_mode)

flask_socketio version:2.8.1
client side socket.io - 1.4.5

any ideas how to resolve this?

question

Most helpful comment

The cors extension for Flask works for regular Flask routes, I don't think they have integrated specific support for Flask-SocketIO.

Flask-SocketIO has its own cors options, which you can see in the documentation: https://flask-socketio.readthedocs.io/en/latest/#flask_socketio.SocketIO (look for cors_allowed_origins). The interesting thing is that by default, all origins are allowed, so I'm wondering if your use of the Flask-Cors extension might be causing some trouble.

See below, when I run the example app in this repository, all requests come with all origins allowed, without doing anything special:

screen shot 2016-11-28 at 12 00 59 pm

All 8 comments

The cors extension for Flask works for regular Flask routes, I don't think they have integrated specific support for Flask-SocketIO.

Flask-SocketIO has its own cors options, which you can see in the documentation: https://flask-socketio.readthedocs.io/en/latest/#flask_socketio.SocketIO (look for cors_allowed_origins). The interesting thing is that by default, all origins are allowed, so I'm wondering if your use of the Flask-Cors extension might be causing some trouble.

See below, when I run the example app in this repository, all requests come with all origins allowed, without doing anything special:

screen shot 2016-11-28 at 12 00 59 pm

Thank you so much for your reply. I removed CORS but the error is still there . For some reasons, the Access-Control-Allow-Origin is set to null. I tried with cors_allowed_origins = ["*"] but still no luck...

image

Your client is sending a Origin: null header with its requests. Do you know why?

It is basically asking the server if null can access, and the server says yes, but clearly that is not the origin that the browser expects.

Hi Miguel,
We cleaned up the python code and added nginx with proper configs. There seems to be something wrong with chrome + socketio combination. The same setup works flawlessly with firefox and safari. With chrome, however even with first party setup, there are lots of errors both on client and server side.

  1. First few emit to server work fine and then the client hangs up then we get
    socket.io-1.4.5.js:1 GET https://subdomain.domain.me/socket.io/?EIO=3&transport=polling&t=LYlzw1z&sid=eb7c4edd1ba84c068f1d00f2fc8ca064 504 (Gateway Time-out).

    We also see socket.io-1.4.5.js:1 POST https://chat.cogmeta.me/socket.io/?EIO=3&transport=polling&t=LYm0F70&sid=5e4f7d4d93294dfebf775e0e138c2637 400 (BAD REQUEST).

  2. Then we get XMLHttpRequest cannot load https://chat.cogmeta.me/socket.io/?EIO=3&transport=polling&t=LYlzw1z&sid=eb7c4edd1ba84c068f1d00f2fc8ca064. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 504. Even though first few emits to server work fine without any problem and the chat server and html are from same domain.

  3. we are seeing lots of WARNING:engineio:Invalid session 0775d5a4446e4a299b0d8beff4acfe96
    errors on server side.

  4. With chrome, client seems to hangup and then all of sudden we see lots of connect/disconnect on server side

Again, Safari and firefox work just fine.

Any thoghts?

Ok, the issue seems to be with chrome (possibly with other browsers) when too many socket.io connections are opened. We are testing a chrome extension which attaches to each tab and opens a separate socket.io connection. We had ~20 tabs open so that many socket.io connections. Apparently, chrome is not able to handle too many socket.io client connections. After restarting chrome browser and with single tab, things are working fine.

The 504s are probably returned by nginx, not the Socket.IO server, so it is not something you will need to investigate on that side. The 400s could be from the server, so you can probably find stack traces in the log that will shed some light.

Hi Miguel,
Thank you so much for your help. We are still sometime facing the issue when multiple socket.io connections are open. We will definitely analyze this in detail soon and get to the bottom.

@cogmeta Hi, How did you fix this issue?

Was this page helpful?
0 / 5 - 0 ratings