使用ngrok内网穿透

没有服务器和公网IP,想要其他人访问自己做好的网站,使用这款简单免费的内网穿透小工具——ngrok,有了它轻松让别人访问你的项目~

一、下载ngrok

官网地址:ngrok | Unified Application Delivery Platform for Developers(需要注册)

打开官网,点击Setup&Started,进入下载页面后,选择合适的操作系统和版本下载软件压缩包

将下载好的压缩包解压,得到一个可执行文件

二、进行穿透(参考官方文档)

回到刚刚进行下载的页面,往下滑可以看到当前用户的身份验证令牌,复制这行命令

打开刚刚解压生成的可执行文件的目录,执行这行命令

现在自己的账号信息已经成功保存到本地的ngrok配置文件了

接下来只需要执行 ngrok http加项目端口号 就可以启动内网穿透服务啦

打开浏览器访问生成的域名,就能访问到本地启动的前端项目,成功截图如下:

虽然现在可以成功访问到网站,但是每次启动都会重新生成域名,这不利于我们持续访问,这个该怎么解决呢?(PS教程第四部分)

三、访问生成的域名可能出现的问题(Vue 项目 invalid host header 问题)

分析问题出现的原因

invalid host header => 无效的Host请求头

测试环境下的webpack有一个host检查功能(webpack的devServer中):如果不配置host就无法访问,用于防止不受信任的主机访问DevServer,当浏览器发出请求时,它会会检查请求中的主机头,若hostname 没有配置在内,则中断访问。

解决方案

设置跳过host检查,注意修改之后要重启服务

// vue3 vue.config.js
module.exports = {// 跳过检查hostdevServer: { disableHostCheck: true }
}

在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加disableHostCheck: true(有的是在vue.config.js里面,找到devServer对象进行添加即可)

devServer: {disableHostCheck: true,
}

四、解决每次穿透,域名会发生变化的问题

试想一下,如果你想将这个项目写进简历中去并备注了内网穿透,当hr点击你简历上面的链接时,你同时在本地开启服务,但是还是访问不了,那岂不是很尬尴呢~

所以我们需要一个静态的、不变的域名,那有小伙伴会问是去买一个域名吗?no,no,no,不用这么麻烦,可以去ngrok官网进行白嫖

打开官网,找到静态域名配置:

点击之后会自动给我们生成一个免费的域名,复制这行命令

打开刚刚解压生成的可执行文件的目录,执行这行命令

成功的截图如下:

五、注意事项

1.每次用完内网穿透后记得及时关闭服务,否则别人可以直接访问你的电脑服务,会有一定的风险

2.保存好自己的Authtoken,不要泄露,如果泄露记得去官网重置

3.觉得有用的小伙伴点个关注和赞赞呀,你的鼓励是我前进的动力!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/664336.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis(十一)单线程VS多线程

文章目录 概述为何选择单线程主要性能瓶颈多线程特性和IO多路复用概述Unix网络编程中的五种IO模型Blocking IO-阻塞IONoneBlocking IO-非阻塞IOIO multiplexing-IO多路复用signal driven IO-信号驱动IOasynchronous IO-异步IO 场景:引出epoll总结 开启Redis多线程其…

2022美国大学生数学建模(优秀获奖论文)-A题:Power Planning Model: Magic Weapon for Cyclists

目录 Summary 1 Introduction 1.1 Background 1.2 Restatement of the Problem 1.3 Our Work 2 Assumptions and Justifification 3 Notations

ADB的配置和使用及刷机root

ADB的配置和使用 ADB即Android Debug Bridge,安卓调试桥,是谷歌为安卓开发者提供的开发工具之一,可以让你的电脑以指令窗口的方式控制手机。可以在安卓开发者网页中的 SDK 平台工具页面下直接下载对应系统的 adb 配置文件,大小只…

115.工业相机海康SDK开发指南(阅读)

一、SDK初始化 包含初始化SDK和反初始化SDK接口。(由于看不到函数内部的具体实现,因此以下的解释仅代表个人的理解) 函数说明 MV_CAMCTRL_API int __stdcall MV_CC_Initialize()//初始化SDK 初始化SDK 成功,返回MV_OK&#xff1b…

Qt-互斥量-临界区-QMutex-QMutexLocker-QReadWriteLock

文章目录 1.QMutex2.QMutexLocker3.QReadWriteLock 在Qt中,互斥量(Mutex)是用于同步多线程访问共享资源的一种机制。临界区(Critical Section)是指一段必须由单个线程执行的代码区域,防止多个线程同时执行这…

Apache Doris 整合 FLINK CDC + Iceberg 构建实时湖仓一体的联邦查询

1概况 本文展示如何使用 Flink CDC Iceberg Doris 构建实时湖仓一体的联邦查询分析,Doris 1.1版本提供了Iceberg的支持,本文主要展示Doris和Iceberg怎么使用,大家按照步骤可以一步步完成。完整体验整个搭建操作的过程。 2系统架构 我们整…

【Spring连载】使用Spring Data访问Redis(三)----连接模式

【Spring连载】使用Spring Data访问Redis(三)----连接模式Connection Modes 一、Redis Standalone二、向Master写入,从Replica读取三、Redis Sentinel四、Redis Cluster Redis可以在各种设置中运行。每种操作模式都需要特定的配置&#xff0c…

Vue打包Webpack源码及物理路径泄漏问题解决

修复前: 找到vue.config.js文件,在其中增加配置 module.exports {productionSourceMap: false,// webpack 配置configureWebpack: {devtool: false,}}其中打包的物理路径泄露我这边试了好多次,发现只有打包的时候NODE_ENVproduction 才能保…

Vue中的计算属性和侦听器(监视器)

一、computed计算属性 1.概念 基于现有的数据,计算出来的新属性。 依赖的数据变化,自动重新计算。 2.语法 声明在 computed 配置项中,一个计算属性对应一个函数 使用起来和普通属性一样使用 {{ 计算属性名}} 3.注意 computed配置项和da…

【网络】 WireShark实现TCP三次握手和四次挥手

目录 一、WireShark介绍 二、什么是TCP 三、TCP三次握手 四、TCP四次挥手 一、WireShark介绍 WireShark是一个开源的网络分析工具,用于捕获和分析网络数据包。它可以在多个操作系统上运行,包括Windows、Mac OS和Linux。 使用WireShark,…

Faster-Whisper 实时识别电脑语音转文本

Faster-Whisper 实时识别电脑语音转文本 前言项目搭建环境安装Faster-Whisper下载模型编写测试代码运行测试代码实时转写脚本 参考 前言 以前做的智能对话软件接的Baidu API,想换成本地的,就搭一套Faster-Whisper吧。 下面是B站视频实时转写的截图 项…

版本管理git及其命令介绍-附带详细操作

前言 在版本管理时代之前,人们写软件的方式如下图1所示 图1 无版本管理的代码 其坏处就是软件版本随着时间越来越多,每个版本修改了什么内容,修改了哪些文件,如果没有详细记录也不知道。这样久会导致如果我们想回退到某个版本内…

MCU方案选型和进口替代,点击查看~

一、MCU简介 MCU(微控制单元)俗称单片机,可被认为是CPU的缩减版本,把CPU的频率与规格进行缩减处理,并将RAM、ROM、时钟、A/D转换、定时/计数器、UART 、DMA等电路单元,甚至包括USB接口、LCD驱动电路都整合…

缓存框架jetcache

在实际应用中,并不是单一的使用本地缓存或者redis,更多是组合使用来满足不同的业务场景。 jetcache组件实现了优雅的组合本地缓存和远程缓存。 支持多种缓存类型:本地缓存、分布式缓存、多级缓存。 官网地址:https://github.com…

《向量数据库指南》——Milvus Cloud丝滑入库是影响开发体验的第一步

除了查询之外,“插入”应该是使用最多的一个数据库操作,所有后续的工作也是建立在数据成功插入的基础上。丝滑的入库体验,是影响开发体验的第一步,也是至关重要的一步。 Milvus Cloud 社区对于“插入”的讨论,主要集中在数据插入的实践经验上: “插入的速度怎么优…

各版本的Qt Creator的下载地址

2024年2月3日,周六上午 Index of /official_releases/qtcreatorhttps://download.qt.io/official_releases/qtcreator/ 如果想下载测试中的最新版Qt Creator的快照可以去这个地址 Index of /snapshots/qtcreatorhttps://download.qt.io/snapshots/qtcreator/

MySQL中的视图与索引

目录 一、视图 1.1 什么是视图 1.2 为什么要使用视图 1.3 视图的作用与特点 1.4 视图的创建 1.5 视图的使用规则 1.6 视图的修改与删除 修改: 删除: 二、索引 2.1 什么是索引 索引的原理: 2.2 索引的优缺点 2.2.1 索引的优点&a…

浅谈智慧消防在铁路系统中的应用与发展

摘要:文章从基于物联网技术的“智慧消防”概念入手,探讨了智慧消防物联网技术在铁路工程中的应用,分析了在实际应用过程中存在的部分难点,并提出了新型物联网无线组网、智能传感器技术、图形可视化技术及安全隐患预测与评估的技术…

C# JSON序列化、反序列化

在 C# 中,你可以使用 Newtonsoft.Json 库(也称为 Json.NET)来进行 JSON 的序列化和反序列化。下面是一个简单的示例: using Newtonsoft.Json; using System;public class Person {public string Name { get; set; }public int Ag…

MongoDB的索引与索引字段的顺序

想提高数据库的查询效率需要建立索引,用索引查询。使用索引查询和不使用索引查询提升的效率和数据库表的记录条数和调用此时有关系。若记录足够大,用索引查询和不用索引查询相差一千倍以上很正常。 MongoDB默认为主键字段_id创建唯一索引,这个…