Real time chat with server in a different IP address

[grrbm]

hey Francisco, I'm trying to implement a socket.io real-time chat, similar to your tutorial. If I do this:

curl "<the server URL>/socket.io/?EIO=4&transport=polling"

it returns correctly, so the backend is working. but I do get CORS error when trying to have my frontend make an API call to the backend, which is in a different port.

I'm not sure what this CORS error is about; I already have the http://localhost:3000 (frontend) route whitelisted using the express cors package. (And it should be working since my other frontend api calls work)

[grrbm]

So, I think I tracked down the reason for the CORS error, and made a temporary fix for it.

Basically we don't have a way of passing cors configuration to socket.io: https://socket.io/docs/v4/handling-cors/

I went here and hardcoded the socket.io CORS options:

   ctx.io = socketIO(ctx.server, {...ctx.options.socket,  cors: {
      origin: "http://localhost:3000",
      methods: ["GET", "POST"],
      allowedHeaders: ["Content-Type"],
      credentials: true,
    },});

[grrbm]

It's actually a super easy fix, we just have to add cors: {} to the list of options here, then we can pass the cors options for the socket io instance when instantiating the server:

server(
  {
    port,
    socket: {
      cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"],
        allowedHeaders: ["Content-Type"],
        credentials: true,
      },
    },
  },
  cors,
  [
    get("/", (ctx) => render("index.html")),
    socket("connect", updateCounter),
    socket("disconnect", updateCounter),
    socket("message", sendMessage),
  ]
);