Nodejs websocket 中的 cookie问题

Node.js WebSocket 中的 Cookie 问题

在使用 WebSocket 连接时，不同浏览器对 Cookie 的处理方式可能会有所不同。例如，Chrome 和 Firefox 在处理 WebSocket 请求时的行为就存在差异。

问题描述

在同一份代码中：

var ws = new WebSocket('ws://' + window.location.host + window.location.pathname);

• Chrome 的 WebSocket 请求头中没有 Cookie。
• Firefox 的 WebSocket 请求头中有 Cookie。

原因分析

这是因为 WebSocket 协议本身并不直接携带 HTTP Cookies。当 WebSocket 连接建立时，浏览器会根据当前页面的 Cookie 状态决定是否将 Cookie 发送到 WebSocket 服务器。这取决于浏览器的实现细节以及安全策略。

解决方案

要确保 WebSocket 请求包含 Cookie，可以采取以下几种方法：

1. 手动设置 Cookie 可以通过 JavaScript 手动将 Cookie 设置到 WebSocket 的请求头中。但需要注意的是，这种方式依赖于浏览器的支持。

   const socket = new WebSocket('ws://' + window.location.host + window.location.pathname);
   
   // 获取当前页面的 Cookie
   const cookies = document.cookie.split(';').reduce((acc, cookie) => {
       const [name, value] = cookie.trim().split('=');
       acc[name] = value;
       return acc;
   }, {});
   
   // 设置自定义 Header
   socket.onopen = () => {
       socket.send(JSON.stringify({
           type: 'set-cookie',
           data: cookies
       }));
   };
   

2. 使用带有 Cookie 的 HTTP 请求 先通过 HTTP 请求获取 Cookie，然后再通过 WebSocket 连接发送 Cookie。

   fetch('http://localhost:4567/', {
       credentials: 'include'
   }).then(response => {
       if (response.ok) {
           return response.text();
       }
   }).then(data => {
       var ws = new WebSocket('ws://' + window.location.host + window.location.pathname);
       ws.onopen = () => {
           ws.send(JSON.stringify({
               type: 'set-cookie',
               data: document.cookie
           }));
       };
   });
   

3. 服务器端处理 如果你有权限修改服务器端代码，可以在 WebSocket 握手过程中从 HTTP 请求头中提取 Cookie 并将其传递给 WebSocket 连接。

   const WebSocket = require('ws');
   const express = require('express');
   const app = express();
   
   app.use(express.json());
   app.use((req, res, next) => {
       res.setHeader('Access-Control-Allow-Credentials', 'true');
       res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4567');
       next();
   });
   
   app.get('/', (req, res) => {
       res.send('Hello World!');
       res.cookie('test', 'value', { httpOnly: false });
   });
   
   const wss = new WebSocket.Server({ server: app.server });
   
   wss.on('connection', (ws, req) => {
       const cookies = req.headers.cookie;
       console.log(cookies); // 输出 Cookie
       ws.send(JSON.stringify({
           type: 'cookie-received',
           data: cookies
       }));
   });
   
   app.listen(4567, () => {
       console.log('Server is running on port 4567');
   });
   

以上方法可以帮助你在 Chrome 浏览器中确保 WebSocket 请求包含 Cookie。希望这些示例代码和解释对你有所帮助！

我也这样觉得, 只有想要 ws 共享原有的 cookie 登陆信息时才会两个弄一起 一般用的时候单纯用 ws 就能保证登录功能了

我想知道connection 绑定登录用户的问题解决了吗，我现在也要解决这个问题。