Gitpod: new vue.js project preview yields "Invalid Host header"

Created on 28 Aug 2018  路  12Comments  路  Source: gitpod-io/gitpod

Installing the vue cli via "npm i -g @vue/cli" and running "vue create hello-world" worked great. However, running it with "yarn serve" and previewing the output on port 8080 yielded a page that said only "Invalid Host header".

Most helpful comment

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

All 12 comments

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

Yep. That did the trick.

Also the host needs to be passed and set to 0.0.0.0 as it defaults to only accepting localhost.

webpack-dev-server --host 0.0.0.0

Btw. the latest update includes full support for *.vue files.

Thanks!your answer.my name is bobo.

Closed, but it is better to use devServer.public: https://webpack.js.org/configuration/dev-server/#devserver-public

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

Where is the file vue.config.js located or do I need to create it? I'm using vue/cli 3.9

@sobiero Yes, create it in root!

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

Where is the file vue.config.js located or do I need to create it? I'm using vue/cli 3.9

You can create a file with that name if you don't have it and add it on the root of your project (same level as package.json for example)

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
// options...
devServer: {
disableHostCheck: true
}
}
Where is the file vue.config.js located or do I need to create it? I'm using vue/cli 3.9
You can create a file with that name if you don't have it and add it on the root of your project (same level as package.json for example)

ssfa

@svenefftinge

I tried passing the url with --public flag but it didn't work either

yarn run dev --public $GITPOD_WORKSPACE_URL

Even tried passing the port

--public $GITPOD_WORKSPACE_URL:443

Also, using disableHostCheck: true doesn't to pose security risk?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Kreyren picture Kreyren  路  3Comments

LezaiNiubi picture LezaiNiubi  路  3Comments

ColbyWTaylor picture ColbyWTaylor  路  3Comments

kuniss picture kuniss  路  3Comments

mouse484 picture mouse484  路  3Comments