浅析如何解决invalid host header:修改host运行项目报错invalid host header
一、问题场景:
想把本地的项目访问localhost:3000访问修改成某个域名,比如a.baidu.com来访问。通过配置host:127.0.0.1 a.baidu.com
,但是访问的时候报错:显示invalid host header
原因:这句话的意思是:无效的Host请求头;
因为vue (React同理)项目在调试时相当于启动了一个服务器以供我们访问(当我们build后,就可以放在我们自己的nginx等服务器),如果不配置host就无法访问。
测试环境下的 webpack 有一个host检查功能:webpack的devServer中,如果不配置host就无法访问,解决办法有好几种,可以去设置host,比如:
二、解决
1、设置允许访问域名:
module.exports = {
//...
devServer: {
allowedHosts: [
'host.com', // 允许访问的域名地址
'.host.com' // .是二级域名的通配符
],
},
};
2、设置跳过host检查:
devServer: {
disableHostsCheck: true
}
同时,修改配置需要重启项目。
三、historyApiFallback
historyApiFallback 用于在使用 Vue Router 或类似的前端路由库时,处理路由切换时的页面刷新问题。当你使用浏览器的前进和后退按钮或手动输入URL时,Vue Router或其他路由库会在前端进行路由切换,但如果没有合适的配置,刷新页面时会导致404错误。
用
vue
或react
开发的app,一般情况下可能会使用路由,如果是使用history
,h5
的这个路由方式,我们刷新页面可能会报错,这样可以使用在devServer
中添加historyApiFallback:true
,来解决这一问题
historyApiFallback:true