使用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 = {
    // 跳过检查host
    devServer: { 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.觉得有用的小伙伴点个关注和赞赞呀,你的鼓励是我前进的动力!!!

相关推荐
cpolar技术支持9 小时前
网关加 gzip,同时开启 chunked,下载回来的包解不开:把两层编码的解压顺序与长度核对做成只读页
python·http·网络编程·socket·内网穿透
承渊政道4 天前
新增一台服务器时还要重新装Nginx?Ansible只改hosts目标列表,同一份Playbook继续执行
运维·nginx·ansible·内网穿透·cpolar
cpolar技术支持8 天前
磁盘明明没满,服务却写不进去?做个 inode 与分区占用只读报表页,cpolar 给异地同事看
linux·内网穿透·cpolar·inode·运维排障
承渊政道11 天前
极空间部署Portainer实战:Docker Socket、9000端口、容器管理与固定地址访问
运维·docker·容器·内网穿透·cpolar·portainer
SoStraw11 天前
没有公网IP怎么远程SSH?设备只装 p2pssh-server,File2File 一键连回去
ssh·内网穿透·远程ssh·webrpc·无公网ip·file2file·p2pssh
cpolar技术支持12 天前
把配置发出去怕带出密钥?先把含凭据配置转成脱敏只读快照,用 cpolar 给同事核对差异
运维·python·内网穿透·cpolar·配置脱敏
cpolar技术支持12 天前
端口被谁占了、这台机上开了哪些监听?本机起一个端口占用只读清单,cpolar 给异地同事远程看谁在监听
运维·python·内网穿透·cpolar·端口占用
todoitbo14 天前
本来只想给内网开个口子,Natapp 却多给了一道防护
前端·javascript·vue.js·内网穿透·网络防护·natapp
ZeroNews内网穿透16 天前
内网穿透公网暴露防护:边缘网关 IP 黑白名单运维实践
运维·网络协议·tcp/ip·内网穿透·api安全·企业网络安全·运维实践
云泽80816 天前
ESXi+飞牛NAS实战:N5105小主机一机多用还能远程管理
esxi·虚拟化·内网穿透·小主机·飞牛nas·n5105