I'm trying to self-host a node.js socket.io (v 4.8.1) application (not using Express). Everything works fine locally, when the server and client are on localhost:8000 and localhost:5173 respectively, but when I try to make these public (using zrok) and replacing the links between the two, I get

Access to XMLHttpRequest at 'https://<server share name>.share.zrok.io/socket.io/?EIO=4&transport=polling&t=pxmzu36h' from origin 'https://<client share name>.share.zrok.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Using the following on the client side gives me an XHR polling error

socket.on("connect_error", (err:Error) => {
  console.log(err.message);
  console.log(err.context);
});

I've tried making sure that access-control-allow-origin is set. On the server, I am using

const httpServer = createServer(function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  res.setHeader('Access-Control-Max-Age', 2592000); // 30 days
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ message: 'CORS enabled' }));
}); // Create HTTP server

const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

On the front (vuejs + vite), I have allowedHosts set in vite.config.ts and switched out the localhost address of the server to the https://<client share name>.share.zrok.io one.

I'm trying to self-host a node.js socket.io (v 4.8.1) application (not using Express). Everything works fine locally, when the server and client are on localhost:8000 and localhost:5173 respectively, but when I try to make these public (using zrok) and replacing the links between the two, I get

Access to XMLHttpRequest at 'https://<server share name>.share.zrok.io/socket.io/?EIO=4&transport=polling&t=pxmzu36h' from origin 'https://<client share name>.share.zrok.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Using the following on the client side gives me an XHR polling error

socket.on("connect_error", (err:Error) => {
  console.log(err.message);
  console.log(err.context);
});

I've tried making sure that access-control-allow-origin is set. On the server, I am using

const httpServer = createServer(function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  res.setHeader('Access-Control-Max-Age', 2592000); // 30 days
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ message: 'CORS enabled' }));
}); // Create HTTP server

const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

On the front (vuejs + vite), I have allowedHosts set in vite.config.ts and switched out the localhost address of the server to the https://<client share name>.share.zrok.io one.

• node.js
• web-services
• socket.io
• ngrok
• self-hosting

1 Answer 1

Just figured it out! This was actually more of an issue with zrok, which I was using to host my server- there was a warning page before accessing the server which I didn't bypass yet (open share- adding the header skip_srok_interstitial)