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

勒布朗-前端

已于 2023-02-27 17:17:54 修改

阅读量2.2k

点赞数

分类专栏： vue 文章标签：服务器 javascript 前端

于 2023-02-27 17:07:15 首次发布

原文链接：https://blog.csdn.net/Cookysurongbin/article/details/860772411

版权

vue 专栏收录该内容

27 篇文章

订阅专栏

文章介绍了两种解决Vue项目中InvalidHostHeader错误的方法：一是设置允许访问的域名，包括使用通配符；二是关闭主机检查。此外，提到了在不同VueCLI版本下修改配置文件的位置和方式，以及使用nginx作为代理服务器的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种解决方案

设置允许访问的域名

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，跳过检查

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

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

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

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