Webpack: "Invalid Host header"

[italomaia]

Running the dev server behind a proxy requires "disableHostCheck: true" in webpack dev settings. Maybe this should come set by default. Also, dev host could be 0.0.0.0.

[LinusBorg]

Since this is marked as a security related option in webpack docs, we won't set it to false by default.

[VictorioBerra]

Trying to use ngrok right now, this is really frustrating me. What is the workaround? I have tried to modify scripts -> serve and add vue-cli-service serve --host 0.0.0.0 --public but this does not have any effect, I still get the same error as @italomaia I do not have a way to edit the internal webpack that I can see.

[LinusBorg]

You find the webpack config for the dev-server in /build/webpack.config.dev.js

[VictorioBerra]

This doesn't really help me as a user. I generated my app with the vue cli. After my app is already scaffolded how do I manipulate the dev server?

[LinusBorg]

What specifically is unclear?

You need to add a webpack option disableHostCheck) to the webpack-config of the dev server. I told you where to find these settings in your scaffolded project.

Or did you scaffold your project with the new vue-cli 3, which does not scaffold the webpack config into the project folder anymore?

In that case 1)you are in the wrong repository - this repo is about the webpack template for vue-cli 2 - and 2) you can add dev-server options in vue.config.js, which is explained in the docs.

[VictorioBerra]

I used the new vue-cli 3. I will go read about the vue.config.js

[theckman]

@VictorioBerra any luck? It doesn't seem to be respecting the devServer settings I'm adding.

[VictorioBerra]

@theckman I gave up and ended up just using my phone over WiFi I believe.

[theckman]

@VictorioBerra I figured it out. I had the configuration at the wrong level. I had been putting it under configureWebpack config which was wrong. It needs to be a top-level key:

module.exports = {
    lintOnSave: true,
    configureWebpack: {
        output: {
            path: __dirname + "/cool-build"
        }
    },
    devServer: {
        disableHostCheck: true
    }
};

[ploissken]

The disableHostCheck:true fixes the problem when using Traefik too, just in case anyone searched for it (:

[DespertaWeb]

I've solved this by using serving a https with serveo:
1 - Go to projects folder and : ssh -R 80:localhost:8081 serveo.net
2 - Package.json --> Scripts --> dev :
Add webpack-dev-server --inline --hot --host 0.0.0.0 --public customname.serveo.net

Source: https://support.glitch.com/t/invalid-host-header-webpack-compiled-successfully/3639/2

[vaibhav-kaushal]

@theckman Your comment saved me a hell lot of time (I'm not a NodeJS geek, trying to build something atop VueJS). I had tried so many things and nothing worked. Thanks so much!

[lemmks]

@theckman 's answer also fixed this problem in Cloud9. Thanks! =D

[jShaf]

For vuejs developers with ngrok (basically, any tunneling), you can create the following file if it does not exist in your app's root directory.

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

[lxr900]

@ploissken

The disableHostCheck:true fixes the problem when using Traefik too, just in case anyone searched for it (:

I'm stuck with this. I'm trying to run a dev environment with docker-compose, with Traefik acting as rev-proxy for my app/api/db with aliased domain names "api.project.localhost" and "db.project.localhost". Api server and db server are working fine, but the actual webapp, which should run under "project.localhost" dev server, still returns "invalid Host Header".

I've tried with disableHostCheck in the vue.config.js file as follows:

module.exports = {
  transpileDependencies: [
    "vuetify"
  ],
  devServer: {
    disableHostCheck: true,
    watchOptions: {
        ignored: ['public/docs/**', 'public/media/**']
    },
    // public: 'progress.localhost:80',
  }
}

As you can see in the comment I've tried also with the public option, but with no success.
The service is defined as as follows in docker-compose:

app:
    build:
      context: webapps/main
      dockerfile: webapp.dev.Dockerfile
    command: >
      npm run serve --host 0.0.0.0 --disable-host-check
    volumes:
      - "./webapps/main/public:/public"
      - "./webapps/main/src:/src"
    environment:
      - VUE_APP_API_BASE_URL=http://api.progress.localhost
    ports:
      - "8080"
    labels:
      - traefik.http.routers.app.rule=Host(`progress.localhost`)

Any suggestion on what I might be doing wrong?

[ericcgu]

@lxr900
What happened to me was that i forgot to update the Dockerfile to copy the vue.conf file into the container.