[Vue] Invalid Host header 에러 해결법

AWS Route 53으로 ec2 인스턴스의 public ip를 레코드 등록 후 접근했더니 웹 페이지에 Invalid Host header 가 떠서 찾아보니 

vue.config.js 의 기본 세팅이 로컬에서는 접속이 허용되지만 외부에서 허용되지 않는다는 것이었다.

 

따라서 구글링해보았더니 전부 webpack-dev-server@3 버전으로 해결방법을 적어놓았길래 webpack-dev-server@4 버전 해결방안을 공유한다.

 

vue.config.js 파일에 다음과 같은 속성을 추가하면 된다.

module.exports = {
  devServer: {
    allowedHosts: "all",
  },
};

 

참고로 버전 3에서는 이런식으로 추가하는데, 4버전으로 와서 disableHostCheck라는 속성이 사라졌다.

disableHostCheck: true,