STOMP协议聊天功能WebSocket连接异常：卡在Opening Web Socket阶段

我基于STOMP协议实现的聊天功能突然无法正常运行——当前WebSocket连接建立失败，日志停留在“Opening Web Socket...”阶段就不再推进。谷歌搜索未找到同类案例，查看SockJS日志发现connected属性为false，且该功能此前一直正常，无预兆出现此问题。

以下是相关代码及控制台日志信息：

前端JavaScript代码 #

<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function(){

        var roomId = [[${room.roomId}]];
        var username = [[${session.loginId}]];
        const date = new Date();
        var time = date.toLocaleTimeString('ko-kr').substring(0, 7);

        console.log(roomId + ", " + username);

        var sockJs = new SockJS("/stomp/chat");
        var stomp = Stomp.over(sockJs);

        axios.get('/chat/user').then(response => {
            this.token = response.headers.token;
            console.log("token : " + this.token);
            console.log(sockJs);
            console.log(stomp);

            stomp.connect({"token" : this.token}, function (){
                console.log("STOMP Connection")

                stomp.subscribe("/sub/chat/room/" + roomId, function (chat) {
                    var content = JSON.parse(chat.body);

                    var writer = content.writer;
                    var message = content.message;
                    var str = '';

                    if(writer === username){
                        str = "<div class='col-6'>";
                        str += "<div class='alert alert-secondary'>";
                        str += "<b>" + time + " " + writer + " : " + message + "</b>";
                        str += "</div></div>";
                    }
                    else{
                        str = "<div class='col-6'>";
                        str += "<div class='alert alert-warning'>";
                        str += "<b>" + time + " " + writer + " : " + message + "</b>";
                        str += "</div></div>";
                    }
                    $("#msgArea").append(str);
                });

                stomp.send('/pub/chat/enter', {}, JSON.stringify({roomId: roomId, writer: username}))
            });

        })

        $("#button-send").on("click", function(e){
            var msg = document.getElementById("msg");

            console.log(username + ":" + msg.value);
            stomp.send('/pub/chat/message', {}, JSON.stringify({roomId: roomId, message: msg.value, writer: username}));
            msg.value = '';
        });

        var input = document.getElementById('msg');

        input.addEventListener("keyup", function (event) {
            if (event.keyCode === 13) {
                document.getElementById("button-send").click();
            }
        });
    });
    /*]]>*/
</script>

后端控制器代码 (StompChatController.java) #

package com.capston.chatting.controller.chat;

import com.capston.chatting.dto.ChatMessageDTO;
import com.capston.chatting.entity.ChatRoom;
import com.capston.chatting.entity.Member;
import com.capston.chatting.provider.JwtTokenProvider;
import com.capston.chatting.repository.MemberRepository;
import com.capston.chatting.service.chat.ChatMessageService;
import com.capston.chatting.service.chat.ChatRoomService;
import com.capston.chatting.service.member.MemberService;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

import java.time.LocalDateTime;

@Slf4j
@Controller
@RequiredArgsConstructor
public class StompChatController {

    private final SimpMessagingTemplate template;
    private final ChatRoomService chatRoomService;
    private final MemberRepository memberRepository;
    private final ChatMessageService chatMessageService;

    /**
     * 发送消息时调用的控制器
     * @param message
     */
    @MessageMapping(value = "/chat/message")
    public void message(ChatMessageDTO message) {
        Member findMember = memberRepository.findMemberByLoginId(message.getWriter());

        ChatRoom findRoom = chatRoomService.findRoomById(message.getRoomId(), findMember);

        String date = LocalDateTime.now().toString().substring(11, 16);

        chatMessageService.save(findRoom, message.getMessage(), date, findMember.getLoginId());

        log.info("{} : 消息已输入. message = {}, writer = {}", message.getRoomId(), message.getMessage(), message.getWriter());
        template.convertAndSend("/sub/chat/room/" + message.getRoomId(), message);
    }
}

WebSocket配置代码 (StompWebSocketConfig.java) #

package com.capston.chatting.config;

import com.capston.chatting.interceptor.StompHandlerInterceptor;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.ChannelRegistration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Slf4j
@Configuration
@EnableWebSocketMessageBroker
@RequiredArgsConstructor
public class StompWebSocketConfig implements WebSocketMessageBrokerConfigurer {

    private final StompHandlerInterceptor stompHandlerInterceptor;

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/stomp/chat")
                .setAllowedOrigins("http://localhost:8080")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/sub");
        registry.setApplicationDestinationPrefixes("/pub");
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(stompHandlerInterceptor);
    }
}

控制台日志截图 #

内容的提问来源于stack exchange，提问作者pollpoll