Access to XMLHttpRequest at 'socket.io' from origin 'develop.domain.com' has been blocked by CORS policy

Question

Access to XMLHttpRequest at 'develop.domain.com/socket.io/?EIO=4&transport=polling&t=OaupjWl' from origin 'https://develop.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

polling.js:298 GET develop.domain.com/socket.io/?EIO=4&transport=polling&t=OaupjWl net::ERR_FAILED 404 (Not Found)

It is working fine on localhost but once I deployed it, I have been getting this error. I have tried multiple things.

This is my CORS setup for my server.js

const corsOptions = {
  origin: [
    "http://localhost:3000",
    /domain\.com$/,
    "https://example.com",
    "https://develop.example.com",
    "http://localhost",
  ],
  credentials: true,
  allowedHeaders: "*",
  optionsSuccessStatus: 200, // For legacy browser support
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
};

app.use(cors(corsOptions));

app.use(cors());

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  next();
});

var server = http.createServer(app);
const io = require("socket.io")(server, {
  cors: {
    origin: "*",
  },
});

And here is how I am setting up the connect for the socket:

var socket = io(https://backend.com);

I added all possible origins as well as headers and I am still not able to solve the problem.