【ngrok】内网穿透访问Vue项目的时候出现Invalid Host header解决办法

最新推荐文章于 2024-07-29 17:18:01 发布

原创最新推荐文章于 2024-07-29 17:18:01 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了解决内网穿透访问Vue项目时遇到的InvalidHostheader问题的方法。通过在vue-cli3的vue.config.js文件中添加disableHostCheck配置，可以有效解决此问题。

内网穿透访问Vue项目的时候出现Invalid Host header解决办法

vue-cli3中:
 // vue.config.js文件中
 module.exports = {
   devServer: {
     disableHostCheck: true
   }
 }

添加disableHostCheck这行代码后正常启动即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Floating_lumb

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Uniapp 持续出现 Invalid Host/Origin header 解决方法

码农研究僧的博客

04-02

616

出现这个问题通常是因为 Webpack Dev Server (WDS) 的 host 校验导致的，可能的原因包括如下

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

热门推荐

念兮为美

02-26

1万+

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误。Invalid Host header是一个常见的错误信息，通常发生在`Web`应用程序中。它表示HTTP请求中的Host header（主机头）与实际请求的主机不匹配，这可能是由于代理服务器或负载均衡器等网络设备引起的。通过检查你的应用程序配置并确保正确的主机名，你应该能够解决此问题。无论你采取哪种解决方案，请务必小心。确保你理解你所做的更改，并在测试之前备份所有配置文件和代码。

参与评论您还未登录，请先登录后发表或查看评论

外网访问内网页面的方法：ngrok结合vscode快速访问vue项目

weixin_46353030的博客

08-21

1314

区分概念：内网：局域网是指在某一区域内由多台计算机互联成的计算机组，一般是方圆几千米以内。外网：即广域网，又称公网。是连接不同地区局域网或城域网计算机通信的远程网。通常跨接很大的物理范围，所覆盖的范围从几十公里到几千公里，它能连接多个地区、城市和国家，或横跨几个洲并能提供远距离通信，形成国际性的远程网络。广域网并不等同于互联网。为了能够使内网的地址被外网访问到，此时需要用到ngrok工具一、ngrok安装（windows环境) 进入ngrok官网下载：https://ngrok.com/downl

使用ngrok内网穿透报Invalid Header问题

今昭昭昭的博客

09-01

949

参考这篇博主

ngrok内网穿透 vue 返回 invalid host header解决办法

邪小新的博客

10-10

5168

使用ngrok内网穿透只返回304，invalid host header 原因：新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。解决：webpack.dev.conf.js添加配置 disableHostCheck: true, disableHostCheck: true ...

ngrok实现内网穿透，vue项目invalid host header报错

MR.杜的博客

05-23

2532

1.注册并下载ngrok，注册的时候需要验证码，有时候登不上去，用到了外网。（我用的是猎豹加速器，可以每天登录签到，有一个小时的使用时长）5.输入下面的命令，即将本地端口8080映射到外网中，如果需要映射其他端口，只需将8080改成相对应的端口即可。内网穿透访问Vue项目的时候，页面出现Invalid Host header。4.执行上面的命令，会自动创建一个配置文件ngrok.yml。生成一个链接，这个链接在其他网络环境下都可以访问。目的：使自己的本地的vue项目可以在外网上访问。打开链接，显示出项目。

Ngork内网穿透，远程访问项目并解决Invalid Host问题

weixin_43857576的博客

03-07

1877

1.百度搜索Ngork 2、登录或注册 3、购买服务器 4、隧道管理 [外链图片转存中…(img-7cTtXnuV-1615122413253)]

vue项目访问Invalid Host header

最新发布

02-09

### 解决 Vue 项目中的 `Invalid Host header` 问题当在开发环境中尝试通过外部网络访问本地运行的 Vue 应用程序时，可能会遇到 `Invalid Host header` 错误消息。这通常发生在使用内网穿透工具（如 ngrok 或 ...

本地内网穿透vue2 Invalid Host header

05-02

解决这个问题需要修改 Vue.js 项目的配置。你可以在 `config/index.js` 文件中添加一行配置： ```js dev: { // ... disableHostCheck: true }, ``` 这样就可以关闭 Vue.js 开发服务器对 Host 头的检查，从而...

ngrok内网穿透访问不了

09-04

6. 如果在本地通过设置域名访问vue项目时出现Invalid Host header错误，你可以按照以下方法解决： - 对于使用vue-cli2创建的项目，在webpack.dev.conf.js中的devServer对象中添加disableHostCheck: true。 - 对于...

Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

10-17

主要介绍了Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

用ngrok访问WebStorm的项目出现Invalid Host header

m0_47506450的博客

04-09

715

在webpack.dev.conf.js devServer里加上 disableHostCheck: true

使用Ngrok内网穿透访问vue项目--出现Invalid Host header报错

weixin_43663775的博客

01-06

1254

之前用nginx代理，没有出现过错误。今天用vue的proxy代理，出现这个问题。后来发现，vue.config.js中 module.exports = { devserver: { disableHostCheck: true, proxy: { ... } } } 加一行disableHostCheck: true,瞬间OK，还是nginx方便~ 老铁们双击666啊，哦不，点赞收藏呀~~蟹蟹 ...

ngrok实现内网穿透window下，vue项目invalid host header报错

zjslan_js的博客

10-01

1450

ngrok实现内网穿透window下，vue项目invalid host header报错

内网穿透，解决vue项目中的“Invalid Host header”

weixin_39255905的博客

11-15

365

在webpack.dev.config.js，加入devServer: { disableHostCheck: true}，具体如下图结果就能通过内网穿透了，访问结果

内网穿透访问Vue项目的时候出现Invalid Host header解决办法

零零七的博客

06-04

935

我用的是国内的sunny-ngrok. 使用非常简单, 根据官网操作就可以. Invalid Host header 当启动了sunny-ngrok的客户端以后, 就这个用sunny-ngrok提供的。, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问Vue项目. 但是如果出现 Invalid Host header,, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑.

Invalid Host header问题如何解决

一个UI、前端爱好者。

07-29

2023

错误通常发生在使用 Webpack 开发服务器或类似工具时，由于安全原因，它会对请求的主机头（Host header）进行验证。

使用ngrok将本地项目映射外网访问

yanzi_0216的博客

10-19

321

使用ngrok将本地项目映射外网访问 https://blog.csdn.net/qq_34827048/article/details/78864012 只将能本地的 127.0.0.1:[设置的端口号] 映射到外网的某个地址中进行访问