浅析如何解决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