Nginx代理Vue项目出现Invalid Host header

最新推荐文章于 2024-02-05 16:00:56 发布
最新推荐文章于 2024-02-05 16:00:56 发布
阅读量2.4k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38280242/article/details/104657644
版权

今日使用nginx的upstream将域名的443端口代理到Vue项目后发现页面出现了

Invalid Host header

无效主机头。

查阅博客一击必杀

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

没了。

星海拾遗
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误
念兮为美
02-26 1万+
全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误。Invalid Host header是一个常见的错误信息，通常发生在`Web`应用程序中。它表示HTTP请求中的Host header（主机头）与实际请求的主机不匹配，这可能是由于代理服务器或负载均衡器等网络设备引起的。通过检查你的应用程序配置并确保正确的主机名，你应该能够解决此问题。无论你采取哪种解决方案，请务必小心。确保你理解你所做的更改，并在测试之前备份所有配置文件和代码。
关于解决Nginx反向代理时headers无效的问题
妖怪的博客
04-25 4044
nginx反向代理默认行为 Nginx在做反向代理时，一般会设置host和ip，如果你的请求的headers里有值，它是可以同时转发过去的 Nginx反向代理时headers无效的问题 有的时候我们会发现反向代理时有的header获取不到 , 原因是 : 默认情况下，并不是所有headers的fields它都会转发，fields里带有下划线(_)的，Nginx视为不合法，自动抛弃不发了。例...
vue nginx Invalid Host header问题解决
2301_78147919的博客
05-31 698
nginx配置好启动后，访问配置的地址时，出现Invalid Host header问题，网上搜索了很多，基本都是在vue.config.js或者webpack.dev.conf.js的devServer中添加disableHostCheck:true；但是设置了会出现问题，导致项目报错或者无法部署。
Nginx做代理服务器出现Invalid Host header问题
wndxwn5的博客
04-26 1896
解决方式就是在前端项目处理热部署的配置文件里加上 disableHostCheck: true，且必须和proxy同级别才能生效
Nginx 代理Vue项目出现Invalid Host header
天河有尽后为涯，星海无边前作岸。
07-10 1783
使用 Nginx 的对项目做负载均衡时，代理的地址无法访问目标地址，且页面报错：Invalid Host header（无效主机头）
解决uni-app或vue项目 用nginx反向代理出现Invalid Host header问题
qq_41585377的博客
06-12 901
1.uniapp解决方案 修改uni-app的manifest.json文件 - 》源码视图 2.vue项目 参考Invalid Host header 服务器域名访问出现的问题
使用Nginx反向代理Vue项目时，报Invalid Host header错误解决办法
CoreCmd的博客
11-07 1306
在vue.config.js中，修改配置:disableHostCheck: true, module.exports = { devServer: { open: true, host:"batman.com", port: 27202, https: false, disableHostCheck: true, ... }, ... }
详解@Vue/Cli 3 Invalid Host header 错误解决办法
12-09
在开发Vue.js应用程序时，你可能会遇到一个名为`Invalid Host header`的错误，尤其是在使用@Vue/Cli 3工具链时。这个错误通常出现在你尝试在非标准的或自定义的HTTP主机头环境下运行Vue CLI的开发服务器时。在本文中...
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue...
Vue项目部署Nginx配置文件 SSL
08-11
Nginx 是一款高性能的 HTTP 和反向代理服务器，常被用来部署 web 应用，包括 Vue 项目。SSL（Secure Sockets Layer）和其继任者 TLS（Transport Layer Security）则是用于在互联网上提供安全通信的标准，通过 HTTPS ...
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Invalid Host header
weixin_30758821的博客
03-15 816
这个主要是自己遇到很多次了，每次都去网上查改哪里，这次记到自己这里吧,以后把遇到的vue工具的一些问题都整理到这里 在vue中开发的项目有时候需要到手机上看效果，但是你配好本地端口之后，会出现访问内容 Invalid Host header 这时候需要在 webpack-dev.config.js中添加上这个 在 devServer中添加代码 disableHostCheck: ...
vue invalid Host/Orign header
little_kid_pea的博客
05-01 109
在webpack.config.js 中设置： devServer: { host: '127.0.0.1' disableHostCheck: true } 参考 https://www.v2ex.com/t/519971
Invalid Host header 服务器域名访问出现的问题
weixin_51225684的博客
02-27 1864
经查是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问。这样有2中方法，一种是设置跳过host检查，一种是直接host设置成你的地址。同样的原理，可以在package.json文件修改scripts命令:webpack-dev-server --disableHostCheck=true。package.json的script语句: webpack-dev-server --host=或者--public=
【已解决】多种方式最新解决Invalid Host header(无效的主机头)服务器域名访问出现的错误
最新发布
gxdzi的博客
02-05 1416
【代码】【已解决】多种方式最新解决Invalid Host header(无效的主机头)服务器域名访问出现的错误。
Nginx配置完毕后不准发请求头header的解决办法
qq_14945327的博客
11-07 1047
目前项目架构是vue+springboot前后端分离的，前端部署在nginx上，后端启动接口服务，并用nginx进行反向代理 部署完毕后，后端就是怎么收取不到shiro的header中的token，并且我们的token定义为AUTH_TOKEN，查看了后端日志+nginx就是怎么也收不到 nginx配置里只有转发设置原始ip和host的 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; prox
vue 项目穿透 invalid host header disablehostcheck: true无效
08-09
当我们在Vue项目中遇到"Invalid host header"错误时，可以尝试使用"disableHostCheck: true"来解决。 通常情况下，这个错误是由于webpack-dev-server的host配置引起的。默认情况下，webpack-dev-server会检查请求的host头信息，如果host头不匹配配置中的值，就会报"Invalid host header"错误。 "disableHostCheck: true"是webpack-dev-server的一项配置，用于禁用host检查。通过设置这个配置为true，我们就可以绕过host检查，解决"Invalid host header"错误。 但是有时候，设置"disableHostCheck: true"可能会无效。这通常是因为我们的Vue项目处在一个使用反向代理的环境中，如Nginx等。在这种情况下，nginx会拦截请求，然后再将请求转发给webpack-dev-server。这样一来，host头信息就会被nginx修改，导致host检查失败。 解决这个问题的方法是在nginx的配置中添加如下内容： location / { proxy_pass http://localhost:8080; // 这里的端口号要与你的webpack-dev-server端口号一致 proxy_http_version 1.1; proxy_set_header Host $host; } 通过设置proxy_set_header Host $host;，将请求的host头信息重新设置为原始请求的host，就可以解决host检查失败的问题。 综上所述，"disableHostCheck: true"一般可以解决"Invalid host header"错误，但在使用反向代理时可能会无效。此时，需要在反向代理的配置中设置proxy_set_header，将host头信息重置为原始请求的host。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值