TOBII
TOBII•13mo ago

WebSocket Authentication: Cookie missing

Hi community 👋 I'm currently trying to integrate the wsLink, and I've noticed that cookies are not automatically sent during initialization (first request). What could be the reason for this? My website runs under the URL http://localhost:3000, and the web server under http://localhost:3001. Does it have something to do with CORS? Example HTTP-Headers: 
...
Cookie: __session=364fc095-9f34-4800-a074-18f0ff4a4876;...
...
...
Cookie: __session=364fc095-9f34-4800-a074-18f0ff4a4876;...
...
Example WebSocket-Headers: 
GET ws://localhost:3001/ HTTP/1.1
Host: localhost:3001
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Upgrade: websocket
Origin: http://localhost:3000
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7
Sec-WebSocket-Key: vC+ByJ+m9oD6Q/r2Rg89Og==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
GET ws://localhost:3001/ HTTP/1.1
Host: localhost:3001
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Upgrade: websocket
Origin: http://localhost:3000
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7
Sec-WebSocket-Key: vC+ByJ+m9oD6Q/r2Rg89Og==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
I created the WebSocket client as follows: 
splitLink({
  condition: (op) => op.type === "subscription",
  true: wsLink({
    transformer: SuperJSON,
    client: createWSClient({
      url: "ws://localhost:3001",
      // lazy: { enabled: true, closeMs: 10000 },
    }),
  }),
  false: createHttpBatchStreamLink(),
})
splitLink({
  condition: (op) => op.type === "subscription",
  true: wsLink({
    transformer: SuperJSON,
    client: createWSClient({
      url: "ws://localhost:3001",
      // lazy: { enabled: true, closeMs: 10000 },
    }),
  }),
  false: createHttpBatchStreamLink(),
})
Server Environment: Tested with Bun v1.0.29 and Node v20.10.0 Client Environment: 
"@trpc/client": "next",
"@trpc/next": "next",
"@trpc/react-query": "next",
"@trpc/server": "next",
"@trpc/client": "next",
"@trpc/next": "next",
"@trpc/react-query": "next",
"@trpc/server": "next",
Thank you in advance. Regards, Tobi
1 Reply
BeBoRE
BeBoRE•13mo ago
Localhost:3000 is considered a different host then localhost:3001, therefor it will not send the cookie with. The way that I deal with this is by proxying both next and the ws server, and have the ws server use /ws. 
import express from 'express';
import { createProxyMiddleware } from 'http-proxy-middleware';

const app = express();
const port = 5000;

// Proxy requests to http://localhost:3000/_next/webpack-hmr
app.use(
  '/_next/webpack-hmr',
  createProxyMiddleware({
    target: 'http://localhost:3000/_next/webpack-hmr',
    changeOrigin: true,
    ws: true,
    onProxyReq: (proxyReq, req) => {
      proxyReq.setHeader('Upgrade', req.headers.upgrade || '');
      proxyReq.setHeader('Connection', req.headers.connection || '');
      proxyReq.setHeader('Host', req.headers.host || '');
    },
  }),
);

// Proxy WebSocket requests to http://localhost:3001
app.use(
  '/ws',
  createProxyMiddleware({
    target: 'http://localhost:3001',
    changeOrigin: true,
    ws: true,
    onProxyReq: (proxyReq, req) => {
      proxyReq.setHeader('Upgrade', req.headers.upgrade || '');
      proxyReq.setHeader('Connection', req.headers.connection || '');
      proxyReq.setHeader('Host', req.headers.host || '');
    },
  }),
);

// Proxy requests to http://localhost:3000
app.use(
  '/',
  createProxyMiddleware({
    target: 'http://localhost:3000',
    changeOrigin: true,
  }),
);

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
import express from 'express';
import { createProxyMiddleware } from 'http-proxy-middleware';

const app = express();
const port = 5000;

// Proxy requests to http://localhost:3000/_next/webpack-hmr
app.use(
  '/_next/webpack-hmr',
  createProxyMiddleware({
    target: 'http://localhost:3000/_next/webpack-hmr',
    changeOrigin: true,
    ws: true,
    onProxyReq: (proxyReq, req) => {
      proxyReq.setHeader('Upgrade', req.headers.upgrade || '');
      proxyReq.setHeader('Connection', req.headers.connection || '');
      proxyReq.setHeader('Host', req.headers.host || '');
    },
  }),
);

// Proxy WebSocket requests to http://localhost:3001
app.use(
  '/ws',
  createProxyMiddleware({
    target: 'http://localhost:3001',
    changeOrigin: true,
    ws: true,
    onProxyReq: (proxyReq, req) => {
      proxyReq.setHeader('Upgrade', req.headers.upgrade || '');
      proxyReq.setHeader('Connection', req.headers.connection || '');
      proxyReq.setHeader('Host', req.headers.host || '');
    },
  }),
);

// Proxy requests to http://localhost:3000
app.use(
  '/',
  createProxyMiddleware({
    target: 'http://localhost:3000',
    changeOrigin: true,
  }),
);

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
https://github.com/BeBoRE/ei-noah-bot/blob/master/apps/proxy/proxy.ts
GitHub
ei-noah-bot/apps/proxy/proxy.ts at master · BeBoRE/ei-noah-bot
De officiële Discord Bot voor de Sweaty GG Chat. Contribute to BeBoRE/ei-noah-bot development by creating an account on GitHub.

Did you find this page helpful?