[Vue.js] Invalid Host header 에러

Invalid Host header

로컬에서 개발할 때는 잘 됐다. 버츄얼박스 게스트에서 개발해서 호스트에서 접속하는 등 테스트를 할 때도 잘 됐다. 그런데 EC2 에서 vue-cli를 이용해 Vue.js 앱을 만들고 접속을 하려고 했더니 Invalid Host header 에러가 뜬다.

 

Invalid Host header

잠시 구글링을 해보니 이 에러는 webpack과 연관이 있는 듯하다. vue webpack invalid host header로 검색을 했더니 다음의 해결책을 발견했다.

 

 

Vue.js 앱의 루트 폴더(babel.config.js가 있는 위치)에 vue.config.js를 만들고 위의 내용을 넣어서 저장한다. 그리고 Vue의 devServer를 재시작했더니

npm run serve

다음과 같이 에러가 사라졌다!