[사지방] Vue Cli3로 만든 프로젝트에서 "Invalid Host Header" 오류 시 대처법

#goorm #vue cli

군인으로써 사지방에 출근한 지 두달 쯤 되었다.

계속 알고리즘만 공부하다가 본격적인 개발을 해보고 싶어서 vue로 재미있는 플랫폼을 하나 만들어보려고 한다.

호기롭게 VUE 프로젝트를 만들고 npm run serve 를 실행했으나...

구름 IDE 에서 포워딩한 외부 URL은 Invalid Host Header 라는 오류만 내뱉을 뿐이였다.

방법을 한참 찾아보니 배포 모드가 아니라 개발모드로 build 한 상태에서는 vue.config.js 파일에서 disableHostCheck 속성을 true 로 해주어야 한다는 것이다.

(분명 전에는 안그랬던 것 같은데... 아무튼)

위와 같이 vue.config.js 파일을 설정해주자. 파일이 없으면 직접 프로젝트 맨 상위 디렉토리에 직접 만들면된다.(vue ui에서 설정만져도 만들어졌던 것 같음 ㅇ_ㅇ)

저장하고 다시 빌드하면, 아래와 같이 잘 실행된다!

앞으로의 개발길이 즐겁기를 기원하며, 이만 사지방 연등을 마친다. :)