Nginx代理Vue项目出现Invalid Host header问题及解决
更新时间：2024年12月14日 09:58:03 作者：天航星
在使用Nginx的upstream对Vue项目进行负载均衡时,如果代理地址无法访问目标地址且页面报错InvalidHostheader（无效主机头）,可能是由于Vue项目的主机检查配置导致的,解决方法是在Vue项目的webpack.dev.js文件中的devServer下添加disableHostCheck:true,跳过主机检查
说明
使用 Nginx 的 upstream 对 Vue 项目做负载均衡时，代理的地址无法访问目标地址
且页面报错：
Invalid Host header（无效主机头）
分析
检查 Nginx 的 nginx.conf 配置，如下：
upstream sail{
server 127.0.0.1:8080;
}
server {
listen 8081;
server_name localhost;
location / {
root html;
index index.html index.htm;
proxy_pass http://sail;
}
}反复检查后没有问题，排除了 Nginx 层面的问题。
那只能是 Vue 项目配置的问题了，最后发现是由于 Vue 的主机检查配置导致的。
解决
- 找到 Vue 项目中的 build 目录下的 webpack.dev.js 文件。
- 在 devServer 下添加
disableHostCheck: true，即跳过检查，如此访问 Vue 项目时就不会进行主机检查。 - 重启项目。
再次访问就能代理到目标地址了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Nginx反向代理下的长连接实现,包括客户端到Nginx和Nginx到后端服务器之间的长连接设置,具有一定的参考价值,感兴趣的可以了解一下2024-11-11
这篇文章主要介绍了详解nginx配置访问图片路径以及html静态页面的调取方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。2016-12-12
nginx报错connect() failed(111: Connection refus
本文主要介绍了nginx报错connect() failed(111: Connection refused)while connecting to upstream解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
本文主要介绍了使用Nginx部署前端Vue项目的实现,通过将这两者结合起来,我们可以高效地托管我们的前端应用,下面就一起来介绍一下,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了解决Nginx端口冲突的排查方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
通过访问日志，可以知晓用户的地址，网站的哪些部分最受欢迎，用户的浏览时间，对大多数用户用的的浏览器做出针对性优化。下面这篇文章主要给大家介绍了关于nginx服务器中access_log日志分析与配置的相关资料，需要的朋友可以参考下。2017-12-12
使用Nginx作为Web缓存服务器,能有效减少数据传输、节省网络流量、加快响应速度、减轻服务器压力、提高服务端可用性,本文就来介绍一下nginx配置文件不使用缓存的方法,感兴趣的可以了解一下2024-11-11
详解Nginx之Location配置(Location匹配顺序)
这篇文章主要介绍了详解Nginx之Location配置(Location匹配顺序)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
基于Nginx的服务器需要设置下重定向，下面的b2c就是相对应的目录，需要的朋友可以参考下。2010-07-07
将树莓派转身为强大的Web服务器如何使用Nginx和cpolar实现远程访问
这篇文章主要介绍了Nginx可视化管理工具结合cpolar实现远程访问内网服务,相比其他 Web 服务器，Nginx 的内存占用率非常低，可以在树莓派等资源受限的设备上运行，同时结合cpolar 内网穿透工具即可实现远程访问，需要的朋友可以参考下2023-09-09
最新评论