Webpack 4 Hot Reload: Invalid Host/Origin header

  • A+

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.


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 


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: