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.

Answer 1

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

Answer 2

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.

Answer 3

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.