vue.js における Invalid Host header を回避

vue.js 場合

vue.js の install

$ /usr/bin/node --version
v10.19.0
$ /usr/bin/npm --version
6.13.4

$ npm install @vue/cli
+ @vue/cli@4.4.6

$ npm install @vue/cli-service-global
+ @vue/cli-service-global@4.4.6

vue.js 用 テスト アプリ作成と起動

$ ./node_modules/@vue/cli/bin/vue.js create vue_test_app

$ cd vue_test_app
$ npm run serve (※1)

※1 または  ./node_modules/.bin/vue-cli-service help serve
            ./node_modules/.bin/vue-cli-service serve

この状態で、virtual boxのhost os側からブラウザアクセスすると、 ブラウザでアクセスをした際、"Invalid Host header" と表示される為、 vue.config.jsを作成

$ vi vue_test_app/vue.config.js
  module.exports = {
    devServer: {
      disableHostCheck: true
    }
  }

この状態で、改めて npm run serve により起動後、ブラウザでアクセスすると、 解消しています。

nuxt.js の場合

nuxt.js の install

$ mkdir nuxt_test_app
$ cd nuxt_test_app

$ vi package.json
{"name": "my-app",
 "scripts": { "dev": "nuxt" }
}

$ npm install --save nuxt
  + nuxt@2.13.2
$

nuxt.js の場合、何もしなくてもアクセスできます。

nuxt.js の場合、何もしなくてもアクセスできます。

$ npm run dev

もし、nuxt.config.js を作成し、hostやportを指定する場合、 「host: 'cent80.a5.jp'」のようにすると、接続できない為、 「host: '0.0.0.0'」と指定します。

$ vi nuxt.config.js
export default {
  server: {
      host: '0.0.0.0',
//    host: 'cent80.a5.jp',
      port: 8081
  }
}