ruoyi 統合 WebSocket 後のエラー「'ws://localhost' への WebSocket 接続に失敗しました:」について

プロジェクトのシナリオ:

Zoyi プロジェクトではオンラインコミュニケーションのためのチャット機能が必要となるため、Zoyi のスキャフォールディングに WebSocket が統合されています。

---

問題の説明

Ruoyi に WebSocket を統合してから通信しますが、WebSocket を開くときに「「ws://localhost」への WebSocket 接続に失敗しました: 」というエラーが報告されます。vue.config.js の構成の変更や、クロスドメイン構成の問題の変更など、多くの解決策が見つかりました。

let socketUrl = "ws://localhost:8080/imserver/" + username;
if (socket != null) {
    socket.close();
    socket = null;
}
// 开启一个websocket服务
socket = new WebSocket(socketUrl);

---

原因分析:

Ruoyi を使用する人は基本的に彼のソース コードを知っています。Ruoyi にはバックエンド インターフェイスへのアクセスに多くの制限があります。一部の特別なアクセスを除き、すべてのリクエストは認証される必要があります。次のコードは Ruoyi のフロントエンド分離 -framework/ からの抜粋です。 src/main/java/com/ruoyi/framework/config/SecurityConfig.java”

   /**
     * anyRequest          |   匹配所有请求路径
     * access              |   SpringEl表达式结果为true时可以访问
     * anonymous           |   匿名可以访问
     * denyAll             |   用户不能访问
     * fullyAuthenticated  |   用户完全认证可以访问（非remember-me下自动登录）
     * hasAnyAuthority     |   如果有参数，参数表示权限，则其中任何一个权限可以访问
     * hasAnyRole          |   如果有参数，参数表示角色，则其中任何一个角色可以访问
     * hasAuthority        |   如果有参数，参数表示权限，则其权限可以访问
     * hasIpAddress        |   如果有参数，参数表示IP地址，如果用户IP和参数匹配，则可以访问
     * hasRole             |   如果有参数，参数表示角色，则其角色可以访问
     * permitAll           |   用户可以任意访问
     * rememberMe          |   允许通过remember-me登录的用户访问
     * authenticated       |   用户登录后可访问
     */
    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception
    {
        // 注解标记允许匿名访问的url
        ExpressionUrlAuthorizationConfigurer<HttpSecurity>.ExpressionInterceptUrlRegistry registry = httpSecurity.authorizeRequests();
        permitAllUrl.getUrls().forEach(url -> registry.antMatchers(url).permitAll());

        httpSecurity
                // CSRF禁用，因为不使用session
                .csrf().disable()
                // 禁用HTTP响应标头
                .headers().cacheControl().disable().and()
                // 认证失败处理类
                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
                // 基于token，所以不需要session
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                // 过滤请求
                .authorizeRequests()
                // 对于登录login 注册register 验证码captchaImage 允许匿名访问
                .antMatchers("/login", "/register", "/captchaImage").permitAll()
                // 静态资源，可匿名访问
                .antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/profile/**").permitAll()
                .antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll()
                // 除上面外的所有请求全部需要鉴权认证
                .anyRequest().authenticated()
                .and()
                .headers().frameOptions().disable();
        // 添加Logout filter
        httpSecurity.logout().logoutUrl("/logout").logoutSuccessHandler(logoutSuccessHandler);
        // 添加JWT filter
        httpSecurity.addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
        // 添加CORS filter
        httpSecurity.addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class);
        httpSecurity.addFilterBefore(corsFilter, LogoutFilter.class);
    }

---

解決：

自分のニーズに応じて設定できます。たとえば、プロジェクトが自分の練習用の場合は、「」を設定できます。

.anyRequest().authenticated()

" 直接コメントアウトすると、すべての認証手順を無視でき、上記の問題は解決されます。または、静的リソースを antMatchers に書き込むと、問題も解決できます。