CODEWITHSUNDEEP
javascriptnode.jsvue.jswebpack-dev-servervue-cli-3
user10826938
user10826938

Reputation: 121

Vue invalid host header

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:

Upvotes: 12

Views: 11515

Answers (5)

Mateus Florencio
Mateus Florencio

Reputation: 1

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

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

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

Upvotes: 0

Anand Raja
Anand Raja

Reputation: 3126

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

Upvotes: 4

Serge
Serge

Reputation: 1601

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"
  }
}

Upvotes: 4

mori
mori

Reputation: 1169

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).

Upvotes: 6

iovanom
iovanom

Reputation: 140

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

Upvotes: 10

Related Questions