Invalid Host header 服务器域名访问出现的问题

待我称王封你为后i 2024-03-26 14:59 69阅读 0赞

第一种解决方案

设置允许访问的域名

module.exports = {
      //...
      devServer: {
        allowedHosts: [
          'host.com', // 允许访问的域名地址，即花生壳内网穿透的地址
          '.host.com'   // .是二级域名的通配符   
        ],
      },
    };

还有一种更简单的解决方案

更简单的解决方案

设置跳过host检查

// vue3 vue.config.js
    module.exports = {
        // 跳过检查host
        devServer: { disableHostCheck: true }
    }

// 在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true
    devServer: {
      disableHostCheck: true,
    }

不生效？

必须要重启！必须要重启！必须要重启！

**在或者：**

vue-cli搭建的环境，用nginx做代理服务器，访问时显示：Invalid Host header

经查是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问。这样有2中方法，一种是设置跳过host检查，一种是直接host设置成你的地址。

1、关闭host检查

可以在build目录下的webpack.dev.conf.js文件，devServer下添加disableHostCheck: true，跳过检查

![8ebc20bbe01d5daccff03135f41baa2d.png][]

同样的原理，可以在package.json文件修改scripts命令:webpack-dev-server --disableHostCheck=true

![efc5b94f027f6c907dc3e2fca0f52eee.png][]

2、设置成你的host，加入你的host是[xxx.com][]，同样2中方法，修改配置文件，和script命令

在config目录下修改index.js文件的host，这个默认是localhost，可修改成 [xxx.com][]

![24f2e90f533f3420b5cc77917aa2cb07.png][]

package.json的script语句: webpack-dev-server --host=[xxx.com][]或者--public=[xxx.com][]

[8ebc20bbe01d5daccff03135f41baa2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b36bc915c83b4b298bf677f6b10e2ead.png
[efc5b94f027f6c907dc3e2fca0f52eee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5c3e9541101a463d9363f69bade8929a.png
[xxx.com]: https://xxx.com
[24f2e90f533f3420b5cc77917aa2cb07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bb1f28ed247b4089a9c2484650260def.png