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

user_11923281 0
Viewed 1034

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

digital-ocean vuejs3 vue.js docker deployment
2 Answers

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"
    }
})
user_7237400

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.

devServer: {
    allowedHosts: [
      'yourdomain.com'
    ]
}

Just look for the file vue.config.js, then replace: yourdomain.com with your own personal domain.

user_156277770
Related