如何在反应本机WebSocket连接中传递查询参数

Question

我有一个服务器，我可以在其中建立 WebSocket 连接。当设备建立 WebSocket 连接时（当应用程序启动/启动屏幕时），服务器在 URL 中查找query parameter，其中包含用户的 auth 令牌，如果令牌正确，则连接被批准，否则连接被拒绝。

这就是代码在 react native 客户端上的样子：

const socket = new WebSocket(`ws://${website}/?token=${value}`);
socket.onmessage = (messageEvent) => {
    console.log('>>> socket on message:', messageEvent.data);
};
socket.onopen = function () {
    socket.send("hello world connection");
};
socket.onclose = () => {
    console.log('Socket disconnected');
};

这在我的 iOS 模拟器中运行良好，并且 iOS 模拟器有一个 WebSocket 连接到我的服务器。但是，我有一部 android 手机（通过 LAN 测试），当我打开应用程序时，我收到一条错误消息：

无法将 ws://192.xxx.xx.xx/token=aut sfiseft2sefsefs..... 设置为默认源头

但是，如果我从 URL 中删除查询参数

const socket = new WebSocket(`ws://${website}`);

这工作正常，但由于我无法在查询参数中传递令牌，我从服务器收到错误。

如何将查询参数传递给android中的WebSocket连接？我做错了什么？

Answer 1

我也有同样的问题。在将 url 传递给 WebSocket 之前使用 encodeURI() 解决问题。

const uri = encodeURI(`ws://${website}/?token=${value}`);    
const socket = new WebSocket(uri);

这对我有用。