h5 websocket自定义请求头

### HTML5 WebSocket 自定义请求头设置 由于 WebSocket 协议本身不支持直接携带自定义头部字段，可以在 WebSocket 连接建立之前的 HTTP 握手阶段添加这些信息。这意味着当发起 WebSocket 请求时，在初始的 HTTP 请求中加入额外的头部数据[^2]。 对于标准的 `WebSocket` 对象来说，并没有内置的方法可以直接用于修改握手期间发送出去的消息中的头部内容。然而，这可以通过一些间接的方式实现： #### 使用第三方库 Socket.IO 实现更灵活的操作 虽然原生 WebSocket 不允许直接操作请求头，但是像 Socket.IO 这样的高级封装提供了更多功能，包括但不限于在连接过程中传递查询参数或通过 URL 片段附加信息，从而达到类似的效果。不过需要注意的是，Socket.IO 并不是严格意义上的 WebSocket 实现，而是基于多种传输方式构建的一个实时通信库[^1]。 #### 利用代理服务器转发带有自定义头部的信息 另一种解决方案涉及在网络架构层面做文章——即让前端先向中间件发出常规 HTTPS 请求并附带所需头部；随后由该服务负责创建真正的 WebSocket 链接并将先前获取到的数据作为上下文的一部分传送给目标服务器。这种方法绕过了浏览器端对 WebSocket 接口施加的一些限制。 ```javascript // 创建一个新的 XMLHttpRequest 来执行预处理步骤 var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/websocket-endpoint'); xhr.setRequestHeader('CustomHeaderName', 'HeaderValue'); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var wsUrl = JSON.parse(xhr.responseText).ws_url; // 建立实际的 WebSocket 连接 var socket = new WebSocket(wsUrl); socket.onopen = function(e) { console.log("[open] Connection established"); }; socket.onerror = function(error) { console.error(`[error] ${error.message}`); }; socket.onmessage = function(event) { console.log(`[message] Data received from server: "${event.data}"`); }; } }; xhr.send(); ``` 上述代码展示了如何借助 AJAX 调用来预先配置好必要的环境变量（比如认证令牌），然后再启动 WebSocket 会话。这种方式能够有效地解决某些场景下需要传递敏感信息的需求，同时也保持了良好的兼容性和安全性。