内网穿透链接vue项目时报Invalid Host header的解决方案

最新推荐文章于 2024-07-29 17:18:01 发布
最新推荐文章于 2024-07-29 17:18:01 发布
阅读量1.2k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Deroser/article/details/107652233
版权

本人使用的vue-cli版本为4.4.0
启动项目后本地访问一切正常，但是用内网穿透访问的时候会出现以下状况
在这里插入图片描述
解决方案如下：
在vue.config.js下配置

module.exports = {
	devServer: {
		disableHostCheck: true
	}
}

如下图所示
在这里插入图片描述
之后重启项目，再次使用内网穿透就可以正常访问了

Der Ingenieur
关注
全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误
念兮为美
02-26 1万+
全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误。Invalid Host header是一个常见的错误信息，通常发生在`Web`应用程序中。它表示HTTP请求中的Host header（主机头）与实际请求的主机不匹配，这可能是由于代理服务器或负载均衡器等网络设备引起的。通过检查你的应用程序配置并确保正确的主机名，你应该能够解决此问题。无论你采取哪种解决方案，请务必小心。确保你理解你所做的更改，并在测试之前备份所有配置文件和代码。
[微信支付]使用Natapp实现本地内网进行开发测试以及解决webpack "Invalid Host header"问题
YuanMxy'Home
04-16 2293
1.微信开发的无奈 最近接手的系统在做微信支付,可是微信的支付授权目录要求必须是外网域名且不支持ip地址 我了个亲娘来,那好吧,直接在服务器上进行开发测试,结果微信支付太多bug,在服务器测试不方便,那咋办呀!!!能否在本地继续开发测试,又能按照微信支付授权目录的规则呢? 使用Natapp等进行内网穿刺即可 2.什么Natapp呢? natapp 基于ngrok的反向代理软件，通过在公网和本地...
vue-cli配置域名访问报错：Invalid Host header（无效的主机头）
qq_40678503的博客
10-21 2204
在开发vue-cli脚手架项目的时候，配置了host : 127.0.0.1 dev.com 想通过dev.com:8080去访问项目，dev.com这个域名后端已经配置好了跨域 但是访问的时候会报Invalid Host header（无效的主机头）错误 上解决方法： 要修改webpack的配置，在项目的根目录下增加vue.config.js 文件 module.exports = { productionSourceMap: false, devServer: { historyApi
内网穿透报错 Invalid Host header
前端程序员、项目经理、人工智能博主
10-31 3692
指向本地服务器访问时,webpack项目页面提示InvalidHostheader.(无效的主机标头)查看文档了解到需将disableHostChecktrue,替换为。在webpack5中disableHostCheck应该被遗弃了。需要分两种情况解决,webpack4.0以下和webpack5.0。webpack4.0以下配置。webpack5.0配置。...
Invalid Host header问题如何解决
最新发布
一个UI、前端爱好者。
07-29 676
错误通常发生在使用 Webpack 开发服务器或类似工具时，由于安全原因，它会对请求的主机头（Host header）进行验证。
vue内网穿透
GTbond的博客
04-24 2356
解决 Vue 项目 invalid host header 问题disableHostCheck:true报错 问题描述 使用内网穿透时出现 invalid host header 找了好多都是让 配置vue.config.js 系统报错 // vue3 vue.config.js module.exports = { // 跳过检查host devServer: { disableHostCheck: true } } 按照上述进行配置时出现报错信息 在这里插入图片描述 原因分析： 根据报错提示 在web
内网穿透vue客户端
u011258729的博客
05-12 230
脚手架cli2.* 要做两处修改1、在config下面index.js 文件，找到 host修改为127.0.0.1 修改端口号 2、在package.json中修改"dev":"webpack-dev-server--disableHostCheck=true
vue项目实现内网穿透
专注
01-19 2269
实现步骤 下载uTools软件的内网穿透插件 配置vue项目 配置内网穿透插件参数 一、下载uTools软件并安装内网穿透插件 二、配置vue项目参数 在webpack.dev.conf.js文件下配置相关参数。 三、配置内网穿透插件参数，如下图： ...
本地内网穿透vue2 Invalid Host header
05-02
解决这个问题需要修改 Vue.js 项目的配置。 你可以在 `config/index.js` 文件中添加一行配置： ```js dev: { // ... disableHostCheck: true }, ``` 这样就可以关闭 Vue.js 开发服务器对 Host 头的检查，从而...
Invalid Host header vue2怎么配置
08-12
- *2* [22/11/11 vue3内网穿透 Invalid Host header](https://blog.csdn.net/Nighsloth/article/details/127810954)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
natapp出现Invalid Host header
09-01
当使用natapp进行内网穿透时，有时可能会遇到"Invalid Host header"的问题。这个问题通常是由于请求头中的Host字段与服务器配置不匹配所导致的。 解决这个问题的方法有几种。如果你使用的是vue脚手架版本为5，你...
Invalid Host header
胡聊前端的博客
03-04 616
webpack-dev-server会校验域名，来防止DNS rebinding攻击。本地绑定host就会导致出现Invalid Host header 禁用即可 devServer: { disableHostCheck: false, },
VUE 内网穿透 发布 手机端调试 valid host 解决方法
weixin_43780921的博客
11-30 602
今天做H5项目遇到个别安卓手机报错,打不开页面,但苦于没有外网地址,装了vconsole也没法在手机端进行调试, 随经过苦苦查找,发现一完美解决方法,可通过内网穿透的方式访问我本地调试的地址,进而可以实时的进行代码的修改验证.2. 重点来了,当你配置完后打开cpolar给你分配的外网地址,你会发现报invalid host 错误,这个时候就需要你把你项目里的webpack中加一段配置。下载后打开一个管理页,自己傻瓜式配置下就行,不再赘述(就是把你本地启动的前端代码地址端口做下映射)
关于vue项目内网穿透问题解决方案
shi860715的博客
06-23 5700
小伙伴们经常回调是接口，或者做一些应用的时候，会用到应用成功后的回调，应为没有公网地址，这里就需要我们做内网穿透，来解决应用的回调问题。 如: 支付宝支付后 ，需要回调 微信支持后，需要回调 前端页面做oss照片上传，需要回调 。。。。。。 1 注册配置隧道 内网穿透工具很多，这里我为大家介绍的是natapp软件。（因为可以免费） https://natapp.cn/ 注册，然后实名认真 首先，购买隧道，当然也是购买免费的。 然后配置 这样我们就将本地的9528端口，映射到公网上去了。 2 下载启动软
Vue前后端分离项目 临时端口内网穿透教程
欢迎来到快乐星球
03-27 964
使用内网云实现项目外网访问
Webpack "Invalid Host Header"
橙煦媛的博客
08-01 969
error信息问题原因新版webpack-dev-server修改了一些东西，默认检查hostname。如果hostname不是配置内的，将不可访问。webpack-dev-server 更新的2.4.3 和 1.16.4 版本，除了常规的 BugFixes 和 Features，还特别注明了一项 Security Fix，并指出这很可能是一个 Breaking Change，但因为并没有涉及到架构
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。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值