Vuejs app showing Invalid host header error loop

Question

I was running a vuejs app on its own dev server, now I can access the site by public IP of machine, But after pointing it with a domain using nginx its showing an error loop in console

error in console

Invalid Host header [WDS] Disconnected!

Due to this the script,style injection and auto reload not working.

config of dev server

dev: {
  assetsSubDirectory: "static",
  assetsPublicPath: "/",
  disableHostCheck: true,
  host: "0.0.0.0", // '192.168.2.39',//can be overwritten by 
  process.env.HOST
  port: 8080,
  autoOpenBrowser: false,
  errorOverlay: false,
  notifyOnErrors: false,
  poll: true, 
  devtool: "cheap-module-source-map",
  cacheBusting: true,
  cssSourceMap: true
},

nginx config for the domain

server
{
  listen 80 ;
  listen [::]:80;
  server_name prajin.prakash.com;
  location / {
        proxy_pass http://localhost:8081;
  }
}

Answer 1

I believe you need to change vue.config.js

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

Answer 2

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

Answer 3

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