TOBII•6mo 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•6mo 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.