[Bug] Socket.io handshake is not established under reverse proxy

[withSang]

Describe the bug

reverse proxy를 설정하면 클라이언트에서 소켓 연결을 시도할 때 기본 네임스페이스(/)가 아닌 서버에서 정의되지 않은 네임스페이스로 연결을 시도하는 문제가 발생합니다.

예를 들어, http://mysite.com 으로 오는 요청은 프론트엔드 서버로, http://mysite.com/api로 오는 요청은 백엔드 서버로 가도록 리버스 프록시를 설정합니다.
클라이언트에서는 Socket.io 서버와 연결을 시도할 때 backServer 변수에 저장된 http://mysite.com/api 주소를 사용하는데, 이 때 http://mysite.com/api의 기본 네임스페이스(/)가 아닌 http://mysite.com의 /api 네임스페이스로 연결을 시도하게 됩니다.
그러나 서버에서는 /api 네임스페이스로 연결을 시도하는 요청을 받지 않으므로 클라이언트와 서버 사이의 소켓 연결이 더 이상 진행되지 않습니다.

따라서 클라이언트에서 Socket.io 서버 주소를 무조건 기본 네임스페이스(/)로 연결을 시도하도록 변경해야 합니다.
위의 예에서 Socket.io 서버와 연결을 시도할 url을 http://mysite.com로 변경하고, 리버스 프록시 설정을 수정하여 http://mysite.com/socket.io로 오는 요청을 백엔드 서버로 가도록 설정하면 문제를 해결할 수 있습니다.

참고

• Socket.io 클라이언트가 연결할 네임스페이스를 지정하는 방법: https://socket.io/docs/v4/client-initialization/#custom-namespace
• 같은 포트에서 http 서버와 socket.io 서버를 동시에 실행할 수 있도록 리버스 프록시 설정하기: https://www.cikorea.net/bbs/view/tip?idx=16769

To Reproduce

Steps to reproduce the behavior:

1. 위 예시와 같이 리버스 프록시 설정
2. 배포된 웹사이트에서 방을 개설하고 채팅 페이지로 이동하기
3. 채팅 목록이 불러와지지 않고 새로운 채팅을 보낼 수 없음
4. 백엔드의 src/modules/socket.js 파일을 수정하여 /api 네임스페이스로 연결하려는 요청이 들어왔을 때에 대한 핸들러를 추가하면, 클라이언트가 기본 네임스페이스(/)가 아닌 /api 네임스페이스로 연결을 시도하고 있음을 알 수 있음
   (e.g.) 기본 네임스페이스로 들어오는 연결을 처리하는io.on("connection", ...) 블록 위에 아래 코드를 추가하기)

  io.of("/api").on("connection", (socket) => {
    logger.info("The client is trying to establish connection through the '/api' namespace!");
  })

Screenshots

없음.