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

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.

Answer 4

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

Answer 5

Sorry that was due to my mistake, I forgot to add disableHostCheck variable in

build/webpack.dev.conf.js

Adding the following solved my issue

disableHostCheck: config.dev.disableHostCheck, 

Answer 6

My config in: projects/vue-try/node_modules/@vue/cli-service/lib/options.js

line 130+

devServer: { disableHostCheck: true, host : '0.0.0.0', https: false }

Answer 7

"vue": "^3.2.13",

"@vue/cli-service": "~5.0.0",

module.exports = {
  devServer: {
    allowedHosts: "all",
  },
};

Answer 8

You need to change vue.config.js file. It is present in your project root (next to package.json).

v3:

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

v4:

module.exports = {
  devServer: {
    allowedHosts: "all",
  },
};

Ref: https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

Answer 9

I believe you need to change the nginX configuration like this

server {
  server_name prajin.prakash.com;
  listen 80;
  listen [::]:80;

  location / {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
  }
  location /sockjs-node {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade websocket;
    proxy_set_header Connection upgrade;
  }
}

EDIT:

Added separate proxying for WebSocket and normal requests.