Vue-cli搭建项目访问出现Invalid Host header

最新推荐文章于 2024-03-29 18:15:45 发布
最新推荐文章于 2024-03-29 18:15:45 发布
阅读量227 收藏
点赞数
分类专栏： VUE 文章标签： vue-cli webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42207182/article/details/94311806
版权

Vue-cli搭建项目访问出现Invalid Host header


原因：是因为新版webpack-dev-serve的安全机制，会检查hostname。
解决方法：关闭HostCheck

  • 进入项目build文件夹，打开webpack.dev.conf.js文件，在devServer配置项添加：
  • disableHostCheck: true

在这里插入图片描述

ChanFFF
关注
专栏目录
全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误
念兮为美
02-26 1万+
全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误。Invalid Host header是一个常见的错误信息，通常发生在`Web`应用程序中。它表示HTTP请求中的Host header（主机头）与实际请求的主机不匹配，这可能是由于代理服务器或负载均衡器等网络设备引起的。通过检查你的应用程序配置并确保正确的主机名，你应该能够解决此问题。无论你采取哪种解决方案，请务必小心。确保你理解你所做的更改，并在测试之前备份所有配置文件和代码。
vue-cli配置域名访问报错：Invalid Host header（无效的主机头）
qq_40678503的博客
10-21 2265
在开发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
vue-cli4.x项目启动本地出现 invalid host header的原因
vscode_js的博客
07-05 548
近段时间有个项目是单点登录的，项目里需要获取用户token，故本地配置host文件来访问线上项目，拿到cookie存储的用户token，所以配置了hosts文件。 之前用过vue-cli2.x,我们只需要配饰hosts文件就可以了。因为webpack是默认设置可配置host，但是新版的vue-cli4.x将这项配置独立出来，需要我们手动配置，其实也很简单，只需在vue.config.js文件中添加一个属性并设置值为true, module.exports ={ devServer: {
解决vue项目中的“Invalid Host header”
最新发布
踏上征程
03-29 1062
最近在做一个微信公众号项目，用微信开发工具调试本地项目，需要做一下内网穿透，代理都配置好了，页面出现这个Invalid Host header错误，内网穿透工具我是用的frps做的，最后通过google找到方法，在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功。PS:本人五年工作经验想寻求长期兼职（远程办公）~有个人项目或企业项目部署维护类的老板可私聊我~
详解@Vue/Cli 3 Invalid Host header 错误解决办法
12-09
我的host设置 报错如下： 解决办法： @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后
Vue 项目 invalid host header 问题 配置 disableHostCheck:true报错
dkf1799897的博客
03-30 9146
解决 Vue 项目 invalid host header 问题 config 配置 disableHostCheck:true报错
解决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 = { ...
[@vue/cli]@vue/cli升级问题
前端
04-15 785
@vue/cli升级问题 升级@vue/cli 4.5.13 ==> 5.0.0-beta4 一般在大版本发生变化的时候，就意味着可能出现无法兼容的问题，因此一定要提前备份代码以防之后无法找回可运行代码 @vue/cli在升级大版本的时候发现项目完全无法启动了，看到错误提示说是wepack的支持版本都变了，所以感觉直接升级package.json是不可行的了 所以采用使用脚手架直接生成一下项目看一下区别，感觉在package.json中没有特别需要变化的地方 经过多次测试发现问题出在 vue.conf
解决 Vue 项目 invalid host header 问题（两种方案）
无聊猿的博客
03-14 4万+
问题出现背景 做微信H5网页时，使用花生壳内网穿透进行调试时，打开网页显示：invalid host header 分析问题 这句话的意思是：无效的Host请求头； 因为在vue在调试时相当于启动了一个服务器以供我们访问（当我们build后，就可以放在我们自己的nginx等服务器） 测试环境下的webpack有一个host检查功能：webpack的devServer中 如果不配置host就无法访问，解决办法有好几种，可以去设置host，比如： 第一种解决方案 设置允许访问的域名 module.exports
vue 本地服务不能被外部IP访问的完美解决方法
12-09
解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header 修改 config/index.js 的 host 属性为 ‘0.0.0.0′ { // ..., host: '0.0.0.0', port: 8080, // ... } 修改 build/webpack.dev.conf.js 的 devServer 配置 增加 disableHostCheck = true devServer: { clientLogLevel: 'warning', historyApiFallback: true, hot: true,
webpack `Invalid Host/Origin header`问题
菜鸟karroy
04-26 1862
问题描述 webpack Invalid Host/Origin header问题 解决办法 这是webpack本身出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。 在config目录中的index.js中添加如下module.exports配置：disableHostCheck: true, ...
vue-cli 解决Invalid Host header的问题，，
dakache11的博客
11-09 787
在webpack.dev.conf.js中添加：disableHostCheck: true devServer: { public: 'local.kingsum.biz', clientLogLevel: 'warning', historyApiFallback: true, hot: true, compress: true, host: HOST || config.dev....
Invalid Host header 服务器域名访问出现的问题
热门推荐
Cooky的博客
01-08 14万+
vue-cli搭建的环境，用nginx做代理服务器，访问时显示：Invalid Host header 经查是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问。这样有2中方法，一种是设置跳过host检查，一种是直接host设置成你的地址。 1、关闭host检查 可以在build目录下的webpack.dev.co...
Vue问题——webpack `Invalid Host/Origin header`
Sunshine0508的博客
06-19 1018
怎么解决webpackInvalid Host/Origin header问题 问题原因： 这是webpack本身出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。 webpack相关版本 package.json "html-webpack-plugin": "^3.2.0"...
VSCode使用过程中遇到的一些坑
qq_15054345的博客
03-29 5万+
最近在使用VSCode，其中遇到了一些坑，便在此做一些解决的记录。我使用的编译器是MinGw。 第一个坑：按下F5运行时提示如下： 文字版提示为： Unable to start debugging. Program path '***.exe' ismissing or invalid. GDB failed with message: "***.exe": not inexecut...
vue项目中的“Invalid Host header”
彭世瑜的博客
01-06 2187
修改vue.config.js的配置 devServer: { disableHostCheck: true, }
使用花生壳时，vue前端配置文件启动注意
qq_42440919的博客
03-11 2371
1、config/index.js中，port是启动 的端口，host是启动后地址 2、如果用了花生壳映射，那么如果这里配置是192.168.0.105、8000，花生壳就可以用这个ip端口做映射 但是如果配置是localhost、8000，那么花生壳会提示“您的局域网服务器连接失败，请检查局域网IP与端口” 因为localhost和192.168.0.105是不对等的 3...
vue项目中配置了二级域名启动报“Invalid Host header”
forteenBrother的博客
07-14 341
vue项目中配置了二级域名启动报“Invalid Host header”解决 因为后台配置了访问权限，在本地开发的时候用二级域名代理localhost访问请求，打开之后报Invalid Host header 解决 修改webpack.dev.conf.js，在devServer对中加入disableHostCheck: true,属性 然后重新启动就ok了 参考链接：https://blog.csdn.net/xr510002594/article/details/100007908 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值