Webpack 4 Hot Reload: Invalid Host/Origin header

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

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.

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.

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.