Mounting Socket.io on a sub-application path other than "/" results in CORS errors

[MauricePasternak]

First Check

• I added a very descriptive title to this issue.
• I used the GitHub search to find a similar issue and didn't find it.
• I searched the FastAPI documentation, with the integrated search.
• I already searched in Google "How to X in FastAPI" and didn't find any information.
• I already read and followed all the tutorial in the docs and didn't find an answer.
• I already checked if it is not related to FastAPI but to Pydantic.
• I already checked if it is not related to FastAPI but to Swagger UI.
• I already checked if it is not related to FastAPI but to ReDoc.

Commit to Help

• I commit to help with one of those options 👆

Example Code

#backend/app.py

import socketio
from fastapi import FastAPI


app = FastAPI()
sio = socketio.AsyncServer(async_mode="asgi", cors_allowed_origins="*")
sio_app = socketio.ASGIApp(socketio_server=sio, socketio_path="socket.io")

# Does not work if this is anything other an a forward slash
app.mount("/", sio_app)


@sio.event
def connect(sid, environ, auth):
    print('connect ', sid)


@sio.event
def disconnect(sid):
    print('disconnect ', sid)


#####################################################
# frontend/App.js

import { io } from "socket.io-client";

function App() {
  // Cannot connect to subapplication path such as: ws://127.0.0.1:8000/ws
  const socket = io("ws://127.0.0.1:8000", { 
    path: "/socket.io/" , 
    autoConnect: false
  });

  const handleConnect = () => {
    console.log("Button Clicked to Connect")
    socket.connect();
  }

  const handleDisconnect = () => {
    console.log("Button Clicked to Disconnect")
    socket.disconnect();
  }

  return (
    <div className="App">
      <button onClick={() => handleConnect()}>Connect</button>
      <button onClick={() => handleDisconnect()}>Disconnect</button>
    </div>
  );
}

export default App;

Description

Backend is on http://localhost:8000
Frontend is on http://localhost:3000

In the event that the mount path is changed to anything other than "/", there does not seem to be any reconciliation between javascript socket.io and python socket.io as mounted by fastapi. I believe this is a FastAPI issue, as leaving the mount path to the default value does not break anything. The example code supplied is a working version based on the "/" mount path.

For example, if it is mounted to "/ws" on the Python backend and the javascript url is supplied as ""ws://127.0.0.1:8000/ws", then the following error happens:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/socket.io/?EIO=4&transport=polling&t=NicmTHK' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If this same "/ws"is specified in the backend while the frontend socket is instead initialized as:

  const socket = io("ws://127.0.0.1:8000/", { 
    path: "ws/socket.io/" , 
    autoConnect: false
  });

Then there is no console output whatsoever.

In the event this isn't an issue, could a working example be supplied as to how a javascript frontend may still communicate with a socket-io subapplication with mounted by FastAPI (i.e. mounted to "/ws")?

Operating System

Linux

Operating System Details

No response

FastAPI Version

0.68.0

Python Version

3.8.10

Additional Context

File Structure attached for replication.

[Smlep]

Hi 👋,

I seem to have reached a working version:

Server side

import socketio
from fastapi import FastAPI


app = FastAPI()
sio = socketio.AsyncServer(async_mode="asgi", cors_allowed_origins="*")
sio_app = socketio.ASGIApp(socketio_server=sio)

app.mount("/ws", sio_app)


@sio.event
async def connect(sid, environ, auth):
    print("connect ", sid)
    await sio.emit("message", f"connected {sid}", room=sid)


@sio.event
def disconnect(sid):
    print("disconnect", sid)

Client side

import { io } from "socket.io-client";

function App() {
  const socket = io("ws://127.0.0.1:8000/", {
    path: "/ws/socket.io",
    autoConnect: false,
  });

  const handleConnect = () => {
    console.log("Button Clicked to Connect");
    socket.connect();
  };

  const handleDisconnect = () => {
    console.log("Button Clicked to Disconnect");
    socket.disconnect();
  };

  socket.on("message", (e) => console.log("Received", e));

  return (
    <div className="App">
      <button onClick={() => handleConnect()}>Connect</button>
      <button onClick={() => handleDisconnect()}>Disconnect</button>
    </div>
  );
}

export default App;

I added a message sent on connection to your example.

There are a few small differences, but most issues I ended up encountering were related to Socket.io struggling to understand that /ws was a FastAPI application sub-path and not a Socket.io Namespace.

[vinodkumars]

This answer doesn't work for me. Have things changed?