The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:XXXX, *', but only one is allowed.

[wlneo]

Stack: FastApi with Uvicorn (Server: Python, Client: JS)

Example code:

origins = ["*"]

app.add_middleware(
        CORSMiddleware,
        allow_origins = origins,
        allow_credentials = True,
        allow_methods = ["*"],
        allow_headers = ["*"]
        )

sio = socketio.AsyncServer(
            cors_allowed_origins="*",
            async_mode="asgi",
            logger=True,
            engineio_logger=True,
        )
sio_app = socketio.ASGIApp(sio)
app.mount("/", sio_app)

As allowed origins is specified twice, first in app.add_middleware and second in socketio.AsyncServer, the error occurs.

SocketIO works if allow_origins option in app.add_middleware is disabled ('Access-Control-Allow-Origin' header now only contains a single value), but in that case, API endpoints depending on CORS middleware by app.add_middleware will no longer by accessible to fetch requests made by the JS client.

Similar issue found here: encode/starlette#1309 (comment)

Is anyone able to provide any insights? Thanks in advance.

[miguelgrinberg]

You have configured CORS twice. First in FastAPI, then again in Socket.IO. Try removing the Socket.IO CORS configuration. If that does not work, then I suggest you adopt the recommended method for mixing an ASGI app with Socket.IO. You can see an example here: https://github.com/miguelgrinberg/python-socketio/blob/main/examples/server/asgi/fastapi-fiddle.py.

[wlneo]

Hi Miguel,

Thanks for answering.

This is my current code:

app = FastAPI()

origins = ["*"]
app.add_middleware(
        CORSMiddleware,
        allow_origins = origins,
        allow_credentials = True,
        allow_methods = ["*"],
        allow_headers = ["*"]
        )

sio = socketio.AsyncServer(async_mode="asgi")
sio_app = socketio.ASGIApp(sio, app)


if __name__ == "__main__":
    uvicorn.run(sio_app, host=host, port=port)

but now am faced with the error "http://localhost:XXXX is not an accepted origin."

Thanks

[miguelgrinberg]

I probably wasn't very clear. With your initial code, I suggested you remove CORS from Socket.IO, because you had Socket.IO as a route mounted on the FastAPI app. If that didn't work, then use the method I recommend you have to enable CORS on both sides, because the FastAPI and the Socket.IO sides run independently.

[wlneo]

Hi Miguel,

The issue is fixed.

Thank you very much for the help!