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

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

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