Vue CLI3でInvalid Host headerが表示されたときの対処法

今回はVue CLI3でInvalid Host headerが表示されたときの対処法についてご紹介いたします。



Vue CLI3でInvalid Host headerが表示されたときの対処法

AWSを使用してVue CLI3を使ったサービスを開発しているときです。

Vue CLI3の「yarn serve」でEC2の剥き出しのIPアドレスにアクセスすると表示されたのですが、Route53を使ってルーティングすると、「Invalid Host header」というエラーらしきものが出て期待した画面が表示されませんでした。
Vue CLIでInvalid Host headerが表示されたときの対処法

結論を言うと、Vueプロジェクトのルートの部分に「vue.config.js」を作成し、下記のように「disableHostCheck: true」を入れてあげればうまくRoute53でも表示されます。

私はVue CLIのポートも変更していたので、下記のようなコードになりました。

ぜひお試しいただければと思います。

終わりに

今回はVue CLI3でInvalid Host headerが表示されたときの対処法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
チャンネル登録者1000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Vue CLI

Posted by ちこ