如何在JS中为Javalin WebSocket连接设置token请求头？

核心问题 #

JavaScript原生WebSocketAPI不支持直接设置自定义请求头，你代码里的headers参数是非标准扩展，大部分浏览器会直接忽略，这就是连接因缺少token头被Access-Manager拦截的原因。

可行的替代方案 #

方案1：通过URL查询参数传递token #

这是最简单直接的方式：

• 前端修改连接URL，将token编码后放在查询参数中：

const token = getCookie('token');
// 用encodeURIComponent避免特殊字符导致的问题
const socket = new WebSocket(`wss://luxcars-api.lukas.bayern/chat?token=${encodeURIComponent(token)}`);

• 后端Access-Manager中修改token获取逻辑，从查询参数读取：

// 替换原有的context.header("token")
String token = context.queryParam("token");

方案2：通过Cookie传递token #

如果你的token已经存储在Cookie中，浏览器会自动在WebSocket握手请求中携带Cookie（需满足同域/跨域Cookie规则）：

• 前端无需额外配置，直接建立连接即可：

const socket = new WebSocket("wss://luxcars-api.lukas.bayern/chat");

• 后端Access-Manager中从Cookie读取token：

String token = context.cookie("token");

注意：如果是跨域WebSocket连接，需要确保Cookie的SameSite属性设置为None并开启Secure，同时后端Javalin需配置正确的CORS规则允许携带凭证。

方案3：通过Sec-WebSocket-Protocol字段传递token #

利用WebSocket握手的Sec-WebSocket-Protocol字段（原本用于指定子协议）来传递token：

• 前端将token作为子协议参数传入：

const token = getCookie('token');
const socket = new WebSocket("wss://luxcars-api.lukas.bayern/chat", [token]);

• 后端Access-Manager中从请求头读取该字段：

String token = context.header("Sec-WebSocket-Protocol");

• 必须在WebSocket连接处理中返回相同的字段值，否则浏览器会断开连接：

ws("/chat", ws -> {
    ws.onConnect(ctx -> {
        // 返回客户端发送的token作为协商后的子协议
        ctx.header("Sec-WebSocket-Protocol", ctx.header("Sec-WebSocket-Protocol"));
    });
    // 其他WebSocket事件处理...
});

关于WebSocketContext的说明 #

你提到的WebSocketContext的header方法，主要用于在WebSocket连接建立后获取握手阶段的请求头，或设置WebSocket响应头（如上面方案3中的子协议返回）。但在Access-Manager拦截的阶段，处理的是WebSocket握手的HTTP请求，此时的Context是HTTP上下文，直接使用它的header()、queryParam()、cookie()等方法即可获取认证信息，无需等到连接建立。

内容的提问来源于stack exchange，提问作者Lvkas_