前端 WebSocket 无法修改请求头时的 Token 传递方案

背景：

开发者可能已尝试通过API修改WebSocket请求头。

部分后端同事期望前端在Request Headers中设置authorization：Token。

注意：JavaScript WebSocket API不提供修改请求头的方法。

你只能另谋其路了。

解决方式1：请求地址中带参数

const ws =  new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${url}?${token}/websocket`)

解决方式2:send发送数据

const  ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}:${url}/websocket`)
ws.onopen=()=>{ws.send(token)}

解决方式 3:利用Sec-WebSocket-Protocol传递token

const url = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${url}/websocket`
const token = localStorage.getItem('token')
const ws = new WebSocket(url, [token])

如果你出现这样的报错

ws.ts:68 Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The subprotocol '"Token"' is invalid.

请处理一下你的Token

const ws = new WebSocket(url, [JSON.parse(token)])

注意：在后端响应的时候也需要带上Token响应

当然如果你还有其他参数需要在头部传递，你也可以

const ws = new WebSocket(url, ['v10.stomp', 'v11.stomp', token])

题外话：如果后端强调需要你在Request Headers中authorization：Token挂载，你告诉他做不到即可。

总结

到此这篇关于前端在WebSocket中加入Token的解决方式的文章就介绍到这了,更多相关前端在WebSocket加入Token内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！