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;
  }
}

score 105 · Accepted Answer · edited Oct 13 '19 at 14:25

105

I believe you need to change vue.config.js

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

edited Oct 13 '19 at 14:25

Towkir

3,889
2
22
41

answered Sep 20 '18 at 18:42

Douglas Porto

1,124
1
7
3

Sometimes there are other nodes already there so be sure to attach this at the root - e.g., pwa: {}, devServer: {} -- I missed missed that at first... Seeing this made me realize, duh... lol – Borzio May 30 '19 at 03:29
5

may result in security vulnerabilities - see the answer bellow (https://stackoverflow.com/a/62116155/3467734) – Andrius May 31 '20 at 12:24
I'd upvote more if I could. The docs around vue.configs.js are hard to find. devServer: proxy is another very useful one. – Peter Ajtai Jun 18 '21 at 01:38
this does not work anymore in webpack-dev-server v >= 4, see the answer below (https://stackoverflow.com/a/71736358/8216911) – Ashutosh Kumar Aug 24 '22 at 09:46

score 25 · Answer 2 · edited Nov 12 '21 at 16:45

25

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

edited Nov 12 '21 at 16:45

Super Kai - Kazuya Ito

22,221
10
124
129

answered May 31 '20 at 12:22

Andrius

717
10
16

1

Should be the accepted answer, as it explains the HOW and the WHY – mik3fly-4steri5k Dec 31 '20 at 13:25
I'd be happy with this answer, if it didn't also result in an invalid host error. – Ryan Leach May 25 '21 at 05:40

score 20 · Answer 3 · answered Apr 04 '22 at 11:19

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

score 11 · Answer 4 · edited Feb 09 '23 at 05:37

11

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.

edited Feb 09 '23 at 05:37

sideshowbarker

81,827
26
193
197

answered Jul 23 '21 at 03:02

Super Kai - Kazuya Ito

22,221
10
124
129

Оливер Макс · Answer 5 · 2022-06-14T22:14:44.787

7

"vue": "^3.2.13",

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

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

edited Jun 14 '22 at 22:14

answered Jun 14 '22 at 22:11

Оливер Макс

71
1
3

score 4 · Answer 6 · answered Sep 27 '22 at 07:55

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

score 3 · Answer 7 · edited Nov 12 '21 at 16:46

3

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,

edited Nov 12 '21 at 16:46

Super Kai - Kazuya Ito

22,221
10
124
129

answered Jun 29 '18 at 08:27

PRAJIN PRAKASH

1,366
1
15
31

score 2 · Answer 8 · edited Nov 12 '21 at 16:46

2

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 }

edited Nov 12 '21 at 16:46

Super Kai - Kazuya Ito

22,221
10
124
129

answered Mar 12 '21 at 12:25

Ant Formicidae

37
1

IVO GELOV · Answer 9 · 2018-06-29T11:05:23.210

-1

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.

edited Jun 29 '18 at 11:05

answered Jun 28 '18 at 16:01

IVO GELOV

13,496
1
17
26

after adding this the site won't work raising an error. 504 Gateway Time-out nginx/1.10.3 (Ubuntu) – PRAJIN PRAKASH Jun 29 '18 at 04:51
`disableHostCheck: true,` fixed my issue ,anyway thanks for your replay.. – PRAJIN PRAKASH Jul 02 '18 at 06:30

Vuejs app showing Invalid host header error loop

9 Answers9

Feb, 2022 Update:

"vue": "^3.2.13",

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

line 130+

EDIT:

Linked