笔记：使用 Charles 配合 webpack-dev-server 遇到的 host check 问题

标题中提到的 Charles 在这里，比较习惯利用它的代理功能配合 Safari inspector 和 Chrome 的 remote device 进行前端界面的真机测试、调试。

问题

想把一个功能抽象出来、做一个本地小测试，很顺手地用 webpack 和 webpack-dev-server 在本地搭建，一如既往的配合 Charles 想在手机上测试，跑了 npm run serve 之后习惯地在 iPhone 的 Safari 里输入了 localhost.charlesproxy.com:3333，没想到是页面全白，只有一句话「invalide host header」，惊呆 😱。

解决

最后翻到了几个 Github 上 issue 和其他社区的帖子：这里，这里还有这里。最后参考 v2.4.3 的 release note：

• We added a check for the correct Host header to the webpack-dev-server. This allowed evil websites to access your assets.
• The Host header of the request have to match the listening adress or the host provided in the public option.
• Make sure to provide correct values here

大概的意思是，打了一个安全更新，以后需要把 需要访问的 hostname 写入到配置文件写、或者 CLI 启动时用 flag 的方式传入，比如我的情况就是 webpack-dev-server --public localhost.charlesproxy.com。

解决方式一：

和上文提到一致，在启动 webpack-dev-server 的时候在 CLI 启动的时候的传入 --public，我在移动端测试使用的 hostname 是 Charles 提供的 localhost.charlesproxy.com，那么省去别的 flag 就是这么写：

解决方式二：

参考 issue 中的这个回答，webpack-dev-server 有一个全局禁用 host 检查的配置：