Vue invalid host header

Question

Don't know why 2 days ago my projects ( created via vue create ) stopped working - in Chrome i get

Invalid Host Header

and

WDS Disconnected

errors. In cmd everything compiles properly( npm run serve ) I don't know webpack, so i have no idea how to fix it.

What i've already done:

• reinstalled node
• deleted and reinstalled all npm packages

Fourway

Answer 1

This issue is caused by this webpack-dev-server issue that has been fixed recently.

To avoid getting the Invalid Host/Origin header error add this to your devServer entry on vue.config.js file:

disableHostCheck: true

Amendatory

Answer 2

Note that disableHostCheck: true is not recommended because it creates security vulnerabilities.

For a dev server running on my local machine, I could resolve the issue by explicitly setting --host in vue-cli-service serve:

scripts: {
  serve: "vue-cli-service serve --host myapp.localhost"
}

The --host option is documented here.

Visit the app in your browser under myapp.localhost:8080 (assuming you're using default port 8080).

Deannedeans

disableHostCheck: true didn't work for me, but this did. Thanks a ton! – Skyjack

Answer 3

Found this question searching for the same "Invalid Host Header" issue. Here's how I solved it.

I am running Vue dev server npm run serve in Docker on my remote server. Couldn't access it at http://example.com:8080 with the error message above.

Correct and secure way is to add the domain name to the vue.config.js file:

"devServer": {
  "public": "example.com"
}

This is a fresh vue project initiated with Vue Cli command: vue create myproject with Vuetify added via vue add vuetify. Full content of my vue.config.js after that is:

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  "devServer": {
    "public": "example.com"
  }
}

Liverwort

Answer 4

This is because of the dev server which isn't accepting external requests. To solve this, we've to configure vue.config.js as below.

If vue.config.js is not found in your vue project, please create the file in root directory and add the following line.

module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

Source

Foulup

This was changed (probably in Vue 2->3?), you now have to do { devServer.allowedHosts: 'all' } instead. webpack.js.org/configuration/dev-server/#devserverallowedhosts – Sir

Answer 5

You can use allowedHosts: 'all' to the vue.config.js

module.exports = {
  devServer: {
    allowedHosts: 'all',
  }
}

https://webpack.js.org/configuration/dev-server/#devserverallowedhosts

Ceremony