error信息
问题原因
新版webpack-dev-server修改了一些东西,默认检查hostname。如果hostname不是配置内的,将不可访问。
webpack-dev-server 更新的2.4.3 和 1.16.4 版本,除了常规的 BugFixes 和 Features,还特别注明了一项 Security Fix,并指出这很可能是一个 Breaking Change,但因为并没有涉及到架构、主要功能等影响重大的地方,因此犯不上增加 Major Version,只是作为安全性补丁,更新了 Patch Version。
这轮更新主要是新增了对 host header 的正确性检测,以屏蔽未经授权的访问。开发者需要在执行 webpack-dev-server 命令时手动添加 --public
选项,取值为授权的 host,否则响应中就会提示这个问题,也就是我们看到的“Invalid Host Header”。
解决方案
- 执行 webpack-dev-server 命令时手动添加
--public
选项,取值为授权的 host,这是官方建议的做法,目的是为了安全。 - 设置 webpack-dev-server 的配置项
disableHostCheck:true
以禁用这一检测,如果开发者使用了代理,或在开发环境中不 care 这些安全问题,该设置可以直接斩草除根。
例外
这些场景下不受该补丁的影响:
- host 为 localhost 或 127.0.0.1 时不会受阻。
- 只有使用 webpack-dev-server 或 webpack-dev-middleware 时会进行该项检测,webpack 和 打包后的代码不受此影响。
参考:
https://github.com/webpack/webpack-dev-server/issues/882
https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3
https://github.com/webpack/webpack-dev-server/releases/tag/v1.16.4