Webpack 4 Hot Reload: Invalid Host/Origin header

Question

I'm working with webpack-dev-server to do hot reloading. However in my console it keeps saying Invalid Host/Origin header

The setup I have in my webpack config is as follows:

'use strict'

const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',

  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    hot: true,
    watchOptions: {
      poll: true
    }
  },
  module: {
    rules: [
      ...
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    ...
  ]
}

How do I solve this issue so that it works in my dev environment? Would love the hear this as currently I have to refresh the page constantly.

score 34 · Answer 1 · answered Dec 23 '18 at 20:48

34

This issue is probably caused by this webpack-dev-server issue that has been fixed recently.

To avoid getting the Invalid Host/Origin header error add this to your devServer entry:

disableHostCheck: true

answered Dec 23 '18 at 20:48

pors

3,856
36
33

2

This is insecure solution. And the issue still exist in the latest build. – Pankaj Jangid Dec 24 '18 at 04:54
8

@Jangid It only affects the dev-server I might hope. So how would that be insecure? – pors Dec 24 '18 at 08:28
9

`ng serve --disableHostCheck=true` was the only thing I found that fixed this error for me on IE11 – cs_pupil Jul 29 '19 at 16:31

score 7 · Answer 2 · answered Jun 03 '21 at 06:56

7

Set allowedHosts, https://webpack.js.org/configuration/dev-server/#devserverallowedhosts. For example, if your web page is xyz.google.com, then just add a host .google.com to it.

answered Jun 03 '21 at 06:56

Rfank2019

297
4
10

score 4 · Answer 3 · answered Jan 12 '19 at 00:45

4

Is your page hosted at a different domain than your webpack files are being served from? If so, you might just need to add the page's domain to the devServer.allowedHosts option.

answered Jan 12 '19 at 00:45

broken-e

790
7
10

score 2 · Answer 4 · answered Aug 14 '19 at 16:25

If this is on Firefox, you can fix it by setting network.http.sendOriginHeader to 1 in about:config.

This "Invalid Host/Origin header" error occurs on Firefox because Firefox still does not sent Origin header with same-origin POST requests, and webpack-dev-server insists on having it.

(Really, webpack-dev-server should only check the Origin header when it's present.)

Avoid disableHostCheck! It's dangerous even in your local dev environment! It allows attackers to connect to your dev environment when you visit an unrelated site with malicious code. It seems really bad.

chouxy-dev · Answer 5 · 2019-01-26T09:21:41.140

-1

Update your webpack-dev-server to >= version 3.1.14 (as of Jan-2019)

npm i -D webpack-dev-server@3.1.14

The respective issue occuring in ~3.1.11 has been patched.

No change to the webpack configuration is required.

edited Jan 26 '19 at 09:21

answered Jan 25 '19 at 11:22

chouxy-dev

47
3

2

Whatever was patched didn't fix much. I have this problem with `webpack-dev-server@3.1.14`, but only with Firefox. – The Head Rush Feb 07 '19 at 15:32

score -3 · Accepted Answer · answered Jan 19 '19 at 14:53

-3

In the end it was an update on the package that didn't come through properly and was solved after installing the newest build.

answered Jan 19 '19 at 14:53

Maarten Raaijmakers

615
2
8
20

Webpack 4 Hot Reload: Invalid Host/Origin header

6 Answers6