【Vue】Invalid Host header( Vue CLI v5以降)

webブラウザでInvalid Host headerが発生したので解決策をメモ書きします。

色々なサイトでvue.config.jsにdisableHostCheck: trueを設定すれば解決すると記載されていますが、このオプションはVue CLI v5以降では廃止されたそうです。マニュアル

マニュアル引用:The disableHostCheck option was removed in favor allowedHosts: 'all';

module.exports = {
  devServer: {
    disableHostCheck: true # 当オプションは廃止
  }
}

変わりにallowedHostsを使うように記載されているので、次のようにコードを書き換えたところ上手く動作するようになりました。

module.exports = {
  devServer: {
      port: 8080,
      client: {
          webSocketURL: 'ws://0.0.0.0:8080/ws',
      },
       allowedHosts: 'all',
  },
}

webSocketURL の設定を行わない場合、画面の読み込みに失敗し、
allowedHosts の設定を行わない場合、 Invalid Host header エラーが発生するそうです。
※ こちらのサイトを参考にさせて頂きました。