webpack解决Invalid Host header

最新推荐文章于 2022-08-19 15:29:40 发布
最新推荐文章于 2022-08-19 15:29:40 发布
阅读量977 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 # Vue # WebPack 文章标签： webpack Invalid Host header 小道仙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Tomwildboar/article/details/83444138
本文介绍了一种在使用Webpack时遇到InvalidHostheader错误的解决方案。通过在配置中加入disableHostCheck选项，可以绕过主机头检查，适用于进行QQ互联等跨域需求。但此方法存在安全隐患，需谨慎使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目的：webpack解决Invalid Host header

1、解决办法

网上说有两种，一直是加上一个  disableHostCheck: true,  （我找了半天，没找到在哪里去加上这句，而且说是不安全）

本来我的 package.json 是这样写的

 改成

我是用这个主要是做QQ互联，有兴趣可以看看这个 ：https://blog.youkuaiyun.com/Tomwildboar/article/details/83444231

 

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误
念兮为美
02-26 1万+
全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误。Invalid Host header是一个常见的错误信息，通常发生在`Web`应用程序中。它表示HTTP请求中的Host header（主机头）与实际请求的主机不匹配，这可能是由于代理服务器或负载均衡器等网络设备引起的。通过检查你的应用程序配置并确保正确的主机名，你应该能够解决此问题。无论你采取哪种解决方案，请务必小心。确保你理解你所做的更改，并在测试之前备份所有配置文件和代码。
Uniapp 持续出现 Invalid Host/Origin header 解决方法
最新发布
码农研究僧的博客
04-02 487
出现这个问题通常是因为 Webpack Dev Server (WDS) 的 host 校验 导致的，可能的原因包括如下
vue-cli配置域名访问报错：Invalid Host header（无效的主机头）
qq_40678503的博客
10-21 2489
在开发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
Webpack "Invalid Host Header"
canglingyue的专栏
02-02 1147
webpack-dev-server 在更新后启动项目报”Invalid Host Header” 错误。 是由于webpack更新主要是新增了对 host header 的正确性检测，以屏蔽未经授权的访问。开发者需要在执行 webpack-dev-server 命令时手动添加 –public 选项，取值为授权的 host，否则就回出现问题 解决方案 官方提供了两个解决方案： 执行
webpack项目提示Invalid Host header
热门推荐
叶琼州的代码小窝
11-13 1万+
由于实验室开组会时项目都是通过局域网访问来演示的，这个项目是采用Django+Vue.js前后端分离的方式来做的，然而发现只能在本地访问，不能通过局域网ip和服务器域名来访问。
webpack项目使用域名访问出现Invalid Host header
qq_36501590的博客
08-19 376
新版webpack新增了对 host header 的正确性检测。在devServer里增加跳过host校验配置。
详解@Vue/Cli 3 Invalid Host header 错误解决办法
12-09
尽管上述方法可以解决`Invalid Host header`错误，但禁用主机头检查也可能带来安全风险。这可能会使你的开发服务器暴露于潜在的跨站请求伪造（CSRF）攻击。因此，在生产环境中，你应该避免禁用这个检查，或者确保你...
解决vue项目中出现Invalid Host header的问题
01-18
在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true devServer: { disableHostCheck: true, } vue-cli版本3.0的情况下修改vue.config.js的配置 module.exports = { ...
[微信支付]使用Natapp实现本地内网进行开发测试以及解决webpack "Invalid Host header"问题
YuanMxy'Home
04-16 2441
1.微信开发的无奈 最近接手的系统在做微信支付,可是微信的支付授权目录要求必须是外网域名且不支持ip地址 我了个亲娘来,那好吧,直接在服务器上进行开发测试,结果微信支付太多bug,在服务器测试不方便,那咋办呀!!!能否在本地继续开发测试,又能按照微信支付授权目录的规则呢? 使用Natapp等进行内网穿刺即可 2.什么Natapp呢? natapp 基于ngrok的反向代理软件，通过在公网和本地...
解决webpack “Invalid Host header“问题
baidu_33614459的博客
04-23 3851
1、在用webpack打包好项目之后，用localhost:8888和127.0.0.1:8888都可以打开（我设置的端口号是8888，可以自己调整）；2、使用域名就出现问题了出现问题原因：这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。解决方法：可以在build目录中的webpack.base.config....
Invalid Host header
胡聊前端的博客
03-04 691
webpack-dev-server会校验域名，来防止DNS rebinding攻击。本地绑定host就会导致出现Invalid Host header 禁用即可 devServer: { disableHostCheck: false, },
解决 Webpack "Invalid Host Header"
nettys的博客
05-09 1124
原因webpack 对 host 进行了安全检查解决方案方案1：配置 package.json （推荐） vue.lvlanzi.club 为授权的host "scripts": { "dev": &amp
webpack一直报Invalid Host header
jinglier520的专栏
02-21 402
方法一： 在package.json的dev/start命令中加入--disable-host-check 方法二： webpack.config.js中devServer对象中增加disableHostCheck: true
vue项目中的“Invalid Host header”
彭世瑜的博客
01-06 2240
修改vue.config.js的配置 devServer: { disableHostCheck: true, }
Invalid Host header vue3
12-30
### 解决 Vue 3 中无效主机头 (Invalid Host Header) 的方法 当开发基于 Vue 3 的应用并尝试通过内网穿透工具（如 sunny-ngrok 或花生壳）进行远程调试时，可能会遇到 `invalid host header` 错误。这通常是因为 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值