在本地通过设置域名访问vue项目时出现Invalid Host header错误

在本地通过设置域名访问vue项目时出现Invalid Host header错误

原因：

webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问，我们可以通过设置跳过host检查来解决该报错，具体如下：

解决方法：

1、vue-cli2创建的项目，在webpack.dev.conf.js中的devServer对象中添加如下设置：

// webpack.dev.conf.js
devServer: {
  disableHostCheck: true,
}

2、vue-cli3创建的项目，在项目根目录下创建vue.config.js文件

// vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

参考文献：

[1] 解决vue项目中的“Invalid Host header”
[2] Invalid Host header 服务器域名访问出现的问题