Vuejs app showing Invalid host header error loop

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


2 Answers
2

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,


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


Added separate proxying for WebSocket and normal requests.

after adding this the site won't work raising an error. 504 Gateway Time-out nginx/1.10.3 (Ubuntu)
– PRAJIN PRAKASH
Jun 29 at 4:51

Could you try with the updated config ?
– IVO GELOV
2 days ago

disableHostCheck: true, fixed my issue ,anyway thanks for your replay..
– PRAJIN PRAKASH
2 hours ago

disableHostCheck: true,

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.