配置Nginx虚拟主机部署Vue.js应用时遇Invalid Host header错误求助

嘿，这个问题我太熟了！Vue CLI的开发服务器默认有个主机校验机制，防止恶意的DNS劫持请求，所以当你通过自定义域名（比如vue.vavenger.local）用Nginx代理访问时，就会触发这个错误。下面给你两种靠谱的解决方案：

方案一：修改Vue项目配置，允许自定义域名 #

在你的Vue项目根目录下创建或修改vue.config.js文件，添加allowedHosts配置，把你的自定义域名加进去：

module.exports = {
  devServer: {
    allowedHosts: [
      'vue.vavenger.local' // 这里填你的自定义域名
    ]
  }
}

这个方法是官方推荐的，既安全又精准，只允许你指定的域名访问开发服务器。

方案二：修改Nginx配置，传递正确的Host头 #

如果不想改Vue项目配置，也可以在Nginx的虚拟主机配置里，给代理请求加上正确的Host头，让Vue开发服务器识别到合法的主机。修改你的/usr/local/etc/nginx/servers/vue.vavenger.local.conf里的location /块：

location / {
    proxy_pass http://vuejs_app;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

添加proxy_set_header Host $host;这行是关键，它会把请求的Host头（也就是vue.vavenger.local）原样传递给后端的Vue开发服务器，这样校验就会通过了。

最后一步：重启服务 #

不管用哪种方案，都需要：

• 重启Vue开发服务器，让项目配置生效
• 重启Nginx，让Nginx配置生效：sudo nginx -s reload

哦对了，别用disableHostCheck: true这种方式，虽然能快速解决，但会关闭主机校验，有安全风险，开发环境也不推荐长期用。

内容的提问来源于stack exchange，提问作者nguyen anhtuan