Vue.js에서 Invalid Host header 를 만나면?

Vue.js를 실행했는데 Invalid Host header 메시지와 함께 로딩이 안되는 경우가 있다. 사실 이 오류메시지는 Vuej.js 개발 환경에 포함된 webpack에서 발생하는 것이므로 webpack 대신 Nginx와 같은 web-proxy를 사용하는 경우에서는 볼 수 없으며, webpack이 실행하는 서버와 실제 요청하는 서버 이름이 다른 경우에 발생한다. 

 

서버 이름이 궂이 고정되어 있지 않는 경우라면 바꿔주는게 좋은데 vue.config의 옵션에서 disableHostCheck 항목을 true로 설정하면 오류가 발생하지 않는다.

 

참고: https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck