【解决方案】webpack `Invalid Host/Origin header`问题

问题

如何解决webpack Invalid Host/Origin header问题

问题描述

webpack相关版本

package.json

    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.13"

webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: resolve(__dirname, '../src/index.js'),
  output: {
    path: resolve(__dirname, '../dist'),
    filename: 'bundle.js'
  },
  devServer: { // DevServer 相关配置
    contentBase: resolve(__dirname, '../dist'),
    host: '0.0.0.0',
    port: 4000
  },
  plugins: [new HtmlWebpackPlugin({
    filename: 'index.html',
    template: resolve(__dirname, '../src/html/index.html')
  })]
}

解决方案

  devServer: {
    contentBase: resolve(__dirname, '../dist'),
    host: '0.0.0.0',
    disableHostCheck: true, //  新增该配置项
    port: 4000
  },

问题定位

这是webpack本身出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。

参考文档

Github Issue
webpack 官方文档:disableHostCheck 配置项

相关问题

host:0.0.0.0 Not working