webpack-dev-server静态资源访问403错误

现象

本地webpack-dev-server启动，访问对应的js静态资源地址例如：http://localhost:8080/static/xxx.js，单独访问该资源加载正常。

但是如果将该资源作为script标签引入到第第三方环境的页面中，则会出现403错误。

原因

一开始先查看浏览器的相关提示，发现除了403没有任何异常，类似于cors跨域这种，后面就联想到script标签有个crossorigin属性，于是查看该属性，发现该crossorigin属性的默认值是anonymous，在该情况下请求js资源不会附带上cookie，也就不会除非cors的预检请求，而且网络请求network面版也证实了这一点，上面没有显示cors错误。

于是只能在去翻看webpack-dev-server的配置文档，在 https://www.webpackjs.com/configuration/dev-server/#devserverallowedhosts 这个地址对应的devServer.allowedHosts配置项找到了答案，该选项允许将允许访问开发服务器的服务列入白名单，默认情况下，仅允许localhost访问，该配置用于检查 host 的应用程序免受到 DNS 重绑定攻击。

如果要关闭该功能，只要将该配置设值为all，即允许在所有主机请求下访问，调整完配置后重启webpack-dev-server，问题解决。