[오류] Vue.js | WebSocket connection to 'ws://~/ws' failed: Invalid frame header

1. 관련 개발 환경

Vue.js, Spring Boot, JavaScript, Axios, Intellij

• 프론트엔드(Vue.js)와 백엔드(Spring Boot) 프로젝트를 분리시켜놓은 상황 (서버가 2개 돌아감)
• proxy로 서버 연결 중!

2. 오류 내용 & 원인

WebSocket connection to '~' failed: Invalid frame header

이 오류에 대해 사람들이 말하는 원인은 다양했음
그 중에 기억나는 건~
1. client(vue)랑 서버(Spring)랑 웹 소켓 버전이 안맞기 때문
2. client는 웹 소켓이 설정 되어있는데, 서버는 설정이 안되어있어서 받을 수 없는 경우

3. 해결 방법

위에 두 가지 이유로 해결하려면, 버전을 맞춰주든 서버에서 웹소켓 설정을 해주든 해야하지만!
지금 프로젝트에서는 웹소켓을 사용할 일이 없기 때문에, 웹 소켓 실행을 아예 꺼주기로 한다

vue.config.js 파일에서 proxy를 설정해뒀었는데,
그 안에 ws:false 를 넣어주고 서버 재실행하기!

그럼 짜안~! 이렇게 깨끗하고 깔끔한 콘솔창을 볼 수 있음:-)

참고 : https://github.com/vuejs/vue-cli/issues/1850