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;
}
}
I believe you need to change vue.config.js
module.exports = {
devServer: {
disableHostCheck: true
}
}
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With