v2 client can't connect to v4 server due to cors issues

[backspacerhino]

Hi,

I have a v2 client that works okay with v2 server. Now I upgraded server to v4. According to this, v2 client should work with v4 server given that allowEIO3: true

When I try with v4 client it works okay, but when I try with v2 client from my index.html with js file I get:

Access to XMLHttpRequest at 'http://localhost:5555/realtime/?token=Y2t3dnNvM2xkMDAwMG14MGozMTVlMnFrMg.2WrARmVdHZUf_1Egc6Xlr0SrkQkEFDj9g6gR6Lg5_z--DB0EQdFznuJ11ZL4&EIO=3&transport=polling&t=NsK1kin' from origin 'null' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

The most confusing thing for me here is when the request's credentials mode is 'include' because there are no credentials, there are no additional headers that would indicate any type of credentials/authorization

And when I go to that link I get:

{
"sid": "4tEXoDgjFlOgrI5PAACA",
"upgrades": [
"websocket"
],
"pingInterval": 25000,
"pingTimeout": 20000
}

Here is my configuration on both server and client

Server:

this.io = new Server(AdonisServer.instance!, {
      path: '/realtime',
      allowEIO3: true,
      cors: {
        origin: "*",
      }
    })

Client:

io(`http://localhost:5555`, {
      path: "/realtime",
      query: {
        token: userLocalToken
      },
      forceNew: true,
    });

The goal is to upgrade server to v4 and for users using v2 to be able to connect. Any help would be appreciated.

[darrachequesne]

If you need to include the cookies, you need to send the proper CORS headers on the server:

this.io = new Server(AdonisServer.instance!, {
  path: '/realtime',
  allowEIO3: true,
  cors: {
    origin: "*",
    credentials: true
  }
})

Reference: https://socket.io/docs/v4/server-options/#cors

Else, you can set the withCredentials to false on the client (it now defaults to false in v3/v4):

io(`http://localhost:5555`, {
  path: "/realtime",
  query: {
    token: userLocalToken
  },
  forceNew: true,
  withCredentials: false
});

Reference: https://socket.io/docs/v4/client-options/#withcredentials

[backspacerhino]

I guess github didn't register my first reply.

First of all thank you for the help, I can confirm that provided solution works. I also noticed that it works when I add transports: ["websocket"] to client. The full client code that also works then looks like this:

io(`http://localhost:5555`, {
  path: "/realtime",
  query: {
    token: userLocalToken
  },
  forceNew: true,
  transports: ["websocket"]
});

Unfortunately both ways are not valid solutions for my case since it introduces breaking change to client side code. The solution I went with is hhaving both v2.3.0 and v4.4.0 server versions and users will slowly move to newer version and we'll deprecate the old one then.