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几种负载均衡模式的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-10-10
这篇文章主要为大家详细介绍了在前端项目开发中如何配置Nginx,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下2023-09-09
本文详细介绍了Nginx中proxy_set_header指令的用法,通过设置不同的请求头信息,可以实现更灵活的反向代理功能,具有一定的参考价值,感兴趣的可以了解一下2024-12-12
这篇文章主要给大家介绍了关于Nginx反向代理配置的相关资料,nginx作为web服务器一个重要的功能就是反向代理,当然你也可以使用nginx配置正向代理,需要的朋友可以参考下2021-06-06
当你安装了nginx的时候,为nginx配置了如下的location,想要去访问路径下面的内容,可是总是出现404,找不到文件,这是什么原因呢,今天我们就来解决这个问题,感兴趣的朋友一起看看吧2023-10-10
今天小编就为大家分享一篇关于nginx proxy_cache批量清除缓存的脚本介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-02-02
这篇文章主要介绍了基于Nginx的Mencached缓存配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
最近在访问时不时会被暴力刷量,爬虫和恶意攻击导致数据库,服务等瘫痪,所以本文介绍了在Nginx上实现一个动态拦截IP的方法,具体是当某个IP在1分钟内访问超过60次时,将其加入Redis并拦截,拦截时间默认1天,需要的朋友可以参考下2025-02-02
本文主要介绍了Nginx+keepalived配置的实现步骤,实现配置Nginx和keepalived、编写脚本以及测试配置,具有一定的参考价值,感兴趣的可以了解一下2025-05-05
Nginx禁用TLSv1.0 1.1改为TLSv1.2 1.3的操作方法
使用Mozilla SSL配置工具生成配置,修改nginx.conf的ssl_protocols和ssl_ciphers,通过ssllabs检测及Linux命令测试TLS版本支持情况,确保网站SSL安全配置生效,本文给大家介绍Nginx禁用TLSv1.0 1.1改为TLSv1.2 1.3的操作方法,需要的朋友一起看看吧2025-08-08
最新评论