'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:

reinstalled node
deleted and reinstalled all npm packages

Solution 1:^[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

Solution 2:^[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).

Solution 3:^[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"
  }
}

Solution 4:^[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	iovanom
Solution 2	mori
Solution 3	Nimantha
Solution 4	Anand Raja

'Vue invalid host header

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]