React Vite + SockJS 客户端全部传输失败

Question

我的项目使用react + vite，没有任何代理配置 我正在尝试使用 webstomp-client 和 sockjs 连接到 websocket 服务器（Springboot 支持 SockJS）

由 JHipster 生成的后端 springboot 服务器，并具有默认的 websocket 配置，如下所示：

package com.mycompany.myapp.config;

import com.mycompany.myapp.security.AuthoritiesConstants;
import java.security.Principal;
import java.util.*;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.server.*;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.security.authentication.AnonymousAuthenticationToken;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.*;
import org.springframework.web.socket.server.HandshakeInterceptor;
import org.springframework.web.socket.server.support.DefaultHandshakeHandler;
import tech.jhipster.config.JHipsterProperties;

@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfiguration implements WebSocketMessageBrokerConfigurer {

    public static final String IP_ADDRESS = "IP_ADDRESS";

    private final JHipsterProperties jHipsterProperties;

    public WebsocketConfiguration(JHipsterProperties jHipsterProperties) {
        this.jHipsterProperties = jHipsterProperties;
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        String[] allowedOrigins = Optional
            .ofNullable(jHipsterProperties.getCors().getAllowedOrigins())
            .map(origins -> origins.toArray(new String[0]))
            .orElse(new String[0]);
        registry
            .addEndpoint("/websocket/tracker")
            .setHandshakeHandler(defaultHandshakeHandler())
            .setAllowedOrigins(allowedOrigins)
            .withSockJS()
            .setInterceptors(httpSessionHandshakeInterceptor());
    }

    @Bean
    public HandshakeInterceptor httpSessionHandshakeInterceptor() {
        return new HandshakeInterceptor() {
            @Override
            public boolean beforeHandshake(
                ServerHttpRequest request,
                ServerHttpResponse response,
                WebSocketHandler wsHandler,
                Map<String, Object> attributes
            ) throws Exception {
                if (request instanceof ServletServerHttpRequest) {
                    ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
                    attributes.put(IP_ADDRESS, servletRequest.getRemoteAddress());
                }
                return true;
            }

            @Override
            public void afterHandshake(
                ServerHttpRequest request,
                ServerHttpResponse response,
                WebSocketHandler wsHandler,
                Exception exception
            ) {}
        };
    }

    private DefaultHandshakeHandler defaultHandshakeHandler() {
        return new DefaultHandshakeHandler() {
            @Override
            protected Principal determineUser(ServerHttpRequest request, WebSocketHandler wsHandler, Map<String, Object> attributes) {
                Principal principal = request.getPrincipal();
                if (principal == null) {
                    Collection<SimpleGrantedAuthority> authorities = new ArrayList<>();
                    authorities.add(new SimpleGrantedAuthority(AuthoritiesConstants.ANONYMOUS));
                    principal = new AnonymousAuthenticationToken("WebsocketConfiguration", "anonymous", authorities);
                }
                return principal;
            }
        };
    }
}

在客户端（React 应用程序），我尝试连接到上面注册的 /websocket/tracker，如下所示

const url = `${WS_URL}/websocket/tracker?access_token=${authToken}`
  const socket = new SockJS(url)
  const stompClient = Stomp.over(
    socket, { protocols: ['v12.stomp'] }
  )
  stompClient.connect({}, (f) => {
    console.log('Connection established', f)
  }, (e) => {
    console.error('Connect failed', e)
  })

但是即使我使用 springboot 服务器或公共测试 websocket 服务器（https://stream.elite12.de/api/sock）（我的意思是这可能不是服务器配置问题），上面的客户端代码也会给我错误代码 2000 ：所有传输失败 图片

有人遇到过这种情况吗？请给我建议。

节点：20.6.1 sockjs 客户端：1.6.1 webstomp 客户端：1.2.6 React 项目模板：Metronic v8.0.25

我尝试切换到其他浏览器（firefox，chrome，safari）但没有任何改变，我也尝试调试sockjs-client源代码，发现所有可用的传输都无法启用（所有驱动程序未定义）

Answer 1

没有可用于启用的传输的原因是将 SockJS 集成到 React 应用程序中，因为

global is not defined

Uncaught ReferenceError: global is not defined
at Object../node_modules/sockjs-client/lib/utils/browser-crypto.js (browser-crypto.js:3)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/sockjs-client/lib/utils/random.js (random.js:4)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/sockjs-client/lib/utils/event.js (event.js:3)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/sockjs-client/lib/transport/websocket.js (websocket.js:3)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/sockjs-client/lib/transport-list.js (transport-list.js:5)
at __webpack_require__ (bootstrap:76)

我没有声明全局变量，而是在 vite

defineConfig

中定义为

{}

正确的解决方法是在index.html中声明全局变量