title: Webpack 4 Hot Reload: Invalid Host/Origin header
body: <p>I'm working with webpack-dev-server to do hot reloading. However in my console it keeps saying <code>Invalid Host/Origin header</code></p>
  
  <p>The setup I have in my webpack config is as follows:</p>
  
  <pre><code>'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(),
      ...
    ]
  }
  </code></pre>
  
  <p>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.</p>