在 React Electron 应用程序中向 WebSocket 添加授权标头

Question

我正在尝试连接到第三方安全 websocket，据我所知，该 websocket 通过标头使用 Bearer Auth。根据此处和其他地方的大多数答案，WebSockets 不支持设置标头。我将如何在 Electron 应用程序中的 React 中执行此操作？我正在使用“react-use-websocket”包，但在这个阶段并对任何以组件为中心的解决方案开放。

我尝试了以下配置，试图发送标头或使用 JWT 提供身份验证，但在尝试打开连接时反复收到

HTTP Authentication failed; no valid credentials available

，并且连接随后关闭。

const [socketUrl, setSocketUrl] = useState('wss://[email protected]/?access_token=My.JWT.Token');

const [socketUrl, setSocketUrl] = useState('wss://messaging.thirdPartyService.com/?access_token=My.JWT.Token');

const { sendMessage, sendJsonMessage, lastMessage, readyState } = useWebSocket(socketUrl, {
        headers: {
            ['Authorization']: "Bearer " + "My.JWT.Token",
        }});

我完全束手无策，希望得到一些帮助来找出可行的解决方案。

Answer 1

我最近遇到了这个问题，经过大量研究，我发现您目前无法在 Javascript 中将授权标头添加到 Websocket URL。 您可以做的最接近的操作是将 access_token 作为查询参数传递，就像您在此处所做的那样：

const [socketUrl, setSocketUrl] = useState('wss://messaging.thirdPartyService.com/?access_token=My.JWT.Token');

为此，API 必须更改结构以从查询参数中获取令牌。

您可以查看此线程以获取更多信息。