Websocket 连接 - 从 create-react-app 迁移到 Vite 后出现“2000 所有传输失败”。 React、Sockjs 客户端、webstomp 客户端、Spring Boot

Question

我将 React 与 sockjs-client 和 webstomp-client 依赖项结合使用来建立与 WebSocket 的连接。之前我使用Create React App来启动React项目，以下代码成功连接到WebSocket服务器：

    useEffect(() => {
        const socket = new SockJS('https://my-service/api');

        const stompClient = Stomp.over(socket);

        stompClient.connect(
            {
                'X-Authorization': 'Bearer ' + token
            },
            function () {
                stompClient.subscribe('/user/queue/result', function (message: any) {
                    const weMessageBody = JSON.parse(message?.body);
                    // DO something with message body
                });

                stompClient.send('/app/init');
            },
            function () {
                toast.error('WS connection lost');
                socket.close();
                stompClient.disconnect();
            }
        );

    }, []);

以前，在检查浏览器的“网络”选项卡时，我可以观察到使用 101 代码成功调用了我的后端服务。 RequestURL 指示 wss://my-service/api，标头包含 Host: my-service。在后端，我使用 Spring Boot。

但是，我最近将前端项目从Create React App迁移到Vite，并遇到了问题。 WebSocket 连接均未成功，并且我收到消息“2000 所有传输失败”。在本地运行项目时，我注意到调用是向 ws://localhost:5137 （我的前端项目的本地地址）发起的，而不是 SockJS 连接中指定的 URL (https://my-service/api) .

当前WebSocket请求如下： 在此输入图片描述

相比之下，之前的请求看起来像这样： 在此输入图片描述

调用永远不会到达后端端点。似乎 sockjs-client 依赖项的行为发生了变化（没有版本更改）。它不再自动从初始 HTTPS 请求 (https://my-service/api) 转换到 WebSocket 协议 (wss://my-service/api/)。此外，它缺少附加到其 WebSocket requestURL 的自动生成的 sessionId 的一部分。

除了有关 WebSocket 连接状态的标准控制台日志（“与 https://my-service/api 断开连接”）之外，我没有遇到任何其他错误。这让我困惑了几天，我正在努力找出并解决这个问题。我尝试使用基本的 Express.js 连接到 WebSocket 来启动一个普通的 Vite 项目，但它仍然失败。之前的 Create React App 构建以及尚未迁移到 Vite 的项目一切都运行良好。

有人遇到过同样的问题吗？或者您知道问题出在哪里吗？我将感谢您的帮助。

Answer 1

我这里也遇到同样的问题。你找到解决办法了吗？

我刚刚将一个react项目的编译器从react-scripts（create-react-app）迁移到viteJS，sockJS现在无法连接。

事实上，网络选项卡中根本看不到 websocket 请求。 套接字刚刚关闭，并出现事件“2000 所有传输失败”。

我尝试了很多方法，但无法使其发挥作用。