[에러] WebSocket https에서 안 될 때 (feat. ngrok)

[ 문제 상황 ]

Uncaught SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS

화상회의 때문에 https 프로토콜을 사용해야 해서 ngrok 도메인을 사용하게 되었는데
기존 배포 서버(http://XXX.XXX.XX.XXX:8080)에서 잘 됐던 websocket이 위와 같은 에러 콘솔을 띄우며 작동하지 않았다.

---

[ 해결 ]

✔️ chat.jsp

// 변경 전
let sockJS = new SockJS("/chat");


// 변경 후
let sockJS = new SockJS("https://XXXXXXXXX.ngrok-free.app/chat");

✔️ StompWebSocket.java

// 변경 전
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/chat").setAllowedOrigins("http://localhost:8080").withSockJS();
}


// 변경 후
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/chat").setAllowedOrigins("https://XXXXXXXXX.ngrok-free.app").withSockJS();
}