Vuejs app showing Invalid host header error loop

Generally it is not recommended to disableHostCheck: true (as it may result in security issues), unless you understand and accept the risks.

Please instead try setting webpack config as follows:

In app root in vue.config.js add

module.exports = {
  devServer: {
    public: 'subdomain.domain.ext:port'
  }
};

NB: for apps running on vuejs + nginx

Feb, 2022 Update:

Create vue.config.js just under the project root directory:

Then, paste this code below to vue.config.js:

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

*Don't forget to restart the server otherwise the change is not reflected.

In webpack-dev-server@v3:

module.exports = {
  devServer: {
    disableHostCheck: true,
  },
};

in webpack-dev-server@v4, the option disableHostCheck has been removed, use allowedHosts instead:

module.exports = {
  devServer: {
    // 'auto' | 'all' [string] here
    allowedHosts: 'all',
  },
};

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

I believe you need to change vue.config.js

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