I’m tring to deploy a simple test app on cloud with digital ocean.
I created a new app with the vue cli (VUE3).
After i dockerized the app and exposed to 8080.
I configured the nginx so that it route traffic from port :80 to :8080 on the container.
Everything is ok, but when i try to visit the page i got this error "Invalid host header".
I searched on google and everybody suggest to create a vue.config.js file with this code:
module.exports = {
devServer: {
disableHostCheck: true
} }
I tried this solution but nothing is changed. How can i fix this error?
I also read that this kind of solution create vulnerabilities, is there a way to fix without this solution?
Thank you in advance for the response
3
Answers
In your vue.config.js file you can try this settings
Found the solution!
The mentioned solutions above does not work for me.
I am not sure when the property
allowedHosts
was changed.currently, we supposed to provide an array to the
allowedHosts
property.Just look for the file
vue.config.js
, then replace:yourdomain.com
with your own personal domain.An alternative to Oren Hahiashvili’s answer when you don’t know ahead of time what hosts will be accessing the devServer (e.g., when testing on multiple environments) is to set
devServer.diableHostCheck
invue.config.js
. For example,Note this is less secure than Oren Hahiashvili’s answer, so only use this when you don’t know the hosts, and you still need to serve using devServer.