Webpack 5移除disableHostCheck后如何解决Invalid Host header报错

Webpack 5 配套的 webpack-dev-server v4 及以上版本已正式移除disableHostCheck配置项，可通过以下方案解决K8s环境下的「Invalid Host header」报错：

• 方案1：配置允许访问的域名（安全性最高，推荐使用）
  在webpack.config.js的devServer字段中添加allowedHosts配置，将K8s Ingress绑定的访问域名、本地开发域名加入列表即可：

  module.exports = {
    // 其余webpack配置项
    devServer: {
      allowedHosts: [
        '替换为你的K8s服务访问域名',
        'localhost',
        '127.0.0.1'
      ]
    }
  }
  

• 方案2：完全关闭Host校验（与原disableHostCheck: true效果完全一致，仅建议本地/测试环境使用）
  直接将allowedHosts设为all即可关闭所有Host校验逻辑：

  module.exports = {
    // 其余webpack配置项
    devServer: {
      allowedHosts: 'all'
    }
  }
  

• 方案3：命令行启动时直接传参
  若通过CLI指令启动webpack-dev-server，可直接追加对应参数：
  完全关闭校验：npx webpack serve --allowed-hosts all
  指定允许访问域名：npx webpack serve --allowed-hosts 替换为你的K8s服务访问域名

注意：K8s环境下若使用Ingress转发请求到dev-server服务，仅需将Ingress配置的域名加入allowedHosts列表即可，无需关闭全局校验，避免引入安全风险。

内容的提问来源于stack exchange，提问作者Fabian Börner