skip to Main Content

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


  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"
        }
    })
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 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 in vue.config.js. For example,

    module.exports = {
      devServer: {
        disableHostCheck: true
      }
    };
    

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search