2019年9月に投稿した記事

Vue-cliと&cloud9のInvalid Host headerを解消する

今回は、毎度おなじみのCloud9で出会った問題です。
大抵はポートとホストを変更すればオッケーです。
ただ、フロント周りのデバッグ時にCORSのエラーがうざすぎるので何か方法が無いかなーと探していました。

使ったvue-cliのバージョンは以下です。


$ vue --version
3.11.0

設定方法

さて、本題です。調べてみた所非常に簡単でした。
以下のファイルをルートディレクトリ配下に、vue.config.jsという名前で作成してください。


module.exports = {
    devServer: {
        public: "${$C9_PID}.vfs.cloud9.${MY_REGION}.amazonaws.com"
    }
}

${C9_PID}はご自身のCloud9のIDを入力してください。これは環境変数にもなっているのでechoコマンドで確認可能です。

${MY_REGION}は使用しているリージョンを入力すればオッケーです。

ちなみに

以前の設定では、disableHostCheck: trueをしていました。

これは単にホストのチェックをしないってだけなので根本的な解決ではありませんでした。

publicでアクセスするネットワークを指定することでHMR(Hot Module Replacement)を正しく設定できます。これによってCORSでエラーが起こることも無くなります。

参考サイト

Vue CLI Service