Webpack 服务器返回无效的主机头

问题描述

在使用 Webpack 进行本地开发时，可能会遇到以下错误：

Invalid Host header

通常情况下，这个错误是由 Webpack 开发服务器返回的。它发生在开发环境中，因为我们通常希望 Webpack 开发服务器监听一个本地的虚拟主机。而这个错误提示是由浏览器发出的，表示从服务器返回的 "Host" 头无效。

解决方案

1. 配置 devServer.disableHostCheck

解决这个问题最简单的方法是在 webpack-dev-server 的配置中增加 disableHostCheck: true。这样可以禁用 webpack-dev-server 的主机检查，允许浏览器访问不在 devServer.host 中的主机。示例如下：

module.exports = {
  // ...
  devServer: {
    // ...
    disableHostCheck: true,
  },
};

2. 配置 devServer.allowedHosts

如果不想完全禁用主机检查，可以通过配置 allowedHosts 来允许特定的主机访问。示例如下：

module.exports = {
  // ...
  devServer: {
    // ...
    allowedHosts: ['example.com'],
  },
};

在上面的示例中，只有 example.com 这个主机可以访问 webpack-dev-server。

3. 修改 hosts 文件

还有一种解决方法是修改本地 hosts 文件，将本地宿主机名映射到本地 IP。例如：

127.0.0.1   dev.example.com

然后在 webpack-dev-server 的配置中指定 dev.example.com 为 devServer.host。这种方法需要修改本地配置文件，比较麻烦，但也是一种可行的方案。

总结

以上是解决 Webpack 服务器返回无效的主机头的三种方法。我们可以根据实际需要，选择其中一种或多种方法来解决此问题。在实际开发中，我们应该尽量保证 Webpack 开发服务器的安全性，只允许特定的主机访问。