How fix "Invalid host header" error in vue 3 project?

Question

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

Answer 1

In your vue.config.js file you can try this settings

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        allowedHosts: "all"
    }
})