크롬은 ws연결을 허용하지 않는다.

https://stackoverflow.com/questions/44575978/websocket-connection-failed-error-in-connection-establishment-neterr-connect 에서

Chrome doesn't allow unsecure websocket (ws) connections to localhost (only wss, so you should setup a TLS certificate for your local web/websocket server). However the same should work fine with Firefox.

크롬에서는 웹소켓(ws) 연결을 허용하지 않습니다(wss만 허용되므로 로컬 웹/웹소켓 서버에 대한 TLS 인증서를 설정해야 합니다)

라고 적혀있다.

---

WebSocket connection to 'ws://localhost:3000/ws' failed: Invalid frame header

이 오류를 해결하려고 했다.

결론은 크롬이 ws을 거부한다.

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = (app) => {
    // WebSocket 연결을 위한 프록시 설정
    app.use(
        "/aa",
        createProxyMiddleware({
            target: "http://localhost:8080",
            ws: false })
    );

    // HTTP 요청을 위한 프록시 설정
    app.use(
        '/api', // 이 경로로 시작하는 HTTP 요청을 잡아서

        createProxyMiddleware({
            target: 'http://localhost:8080', // 여기로 전달
            changeOrigin: true,
        })
    );
};

그냥ws: true를 ws: false로 바꿔주어서 크롬에 WebSocket을 요청하지 못하게 막아버렸다.

ws: false 로 설정 해놓으면 WebSocket은 연결 할 수 없다.

지금 내가 구현한 코드는 SockJS 라이브러리를 사용해 WebSocket 연결이 불가능할 때 폴백으로 롱 폴링(long polling)과 같은 기술을 사용할 수 있게 한다.

즉, WebSocket을 사용하려면 로컬 웹/웹소켓 서버에 대한 TLS 인증서를 설정해야 한다.