vue项目本地映射到外网访问时出现 Invalid Host header_vue invalid host header

背景

通过公网访问本机运行的vue项目，访问时遇到的问题

一、遇到的问题

报错：

Invalid Host/Origin header
1

原因：

新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问。

二、解决方法

方法1：
在vue项目的根目录下创建vue.config.js，并加入以下配置：

module.exports = {
    devServer: {
        disableHostCheck: true,
    }
}
1
2
3
4
5

可参考: vue之Error: Unknown option: .devServer.

方法2：
在vue项目的根目录下创建vue.config.js，并加入以下配置：

module.exports = {
devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it

 }   
}   
1
2
3
4
5
6
7

扩展点其他配置：

devServer: {
  compress: true,
  inline: true,
  port: '8080',
  allowedHosts: [
      '.csdn.com'
  ]
},
1
2
3
4
5
6
7
8

还有热更新等

附件

参考：i-am-getting-an-invalid-host-header-message-when-connecting-to-webpack-dev-ser