CORS error in latest release

[saifulshihab]

Older version of socket.io just works fine, but the latest release shows CORS error when trying to connect front to back. I also added CORS middleware to the server but it's not working. But when I switch back to the older version of socket then it's just working nicely.

[marovargovcik]

Hi, I believe this is because documentation does not reflect the change that was made with 3.0 release.
Please see this link https://socket.io/docs/migrating-from-2-x-to-3-0/, section CORS handling.

Not gonna lie, it is kind of a bummer. Started playing with socket.io just today and right away there are road blocks. I would downgrade to 2.x but it seems that documentation does not have versioning.

[darrachequesne]

Hi! Sorry for that, the documentation is in the process of being updated for v3.

I've added a section about CORS here: https://socket.io/docs/v3/handling-cors/

Could you please check if that's clear enough?

[saifulshihab]

@darrachequesne thanks, it's solved!

[quindo]

This might cause problems for people with glitch.me projects. When upgrading the to v3 the glitch.me projects start replying with the error saifulshihab posted. However it appears that CORS is against glitch.me and AWS's TOS and will get a projected removed. Is there a way to run the v3 framework without including CORS?

I do not fully understand what CORS is and why it is a problem. I am just trying to piece together a plan.

[jennschiffer]

Hi @quindo - just wanted to clarify that enabling CORS is not against Glitch's TOS. Some users were using particular npm packages like CORS-anywhere for malicious reasons and that is against our TOS.

[saifulshihab]

for those who face the problem:-

// server-side
const io = require("socket.io")(httpServer, {
  cors: {
    origin: "https://example.com",
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
});

// client-side
const io = require("socket.io-client");
const socket = io("https://api.example.com", {
  withCredentials: true,
  extraHeaders: {
    "my-custom-header": "abcd"
  }
});

[darrachequesne]

I think this can now be closed. Please reopen if needed.