Ngrok是内网穿透的工具，简而言之就是将内网IP映射成对外可访问的域名。Ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。ngrok 可捕获和分析所有通道上的流量，便于后期分析和重放。它是内网穿透的跳板之一。
下载ngrok
https://dashboard.ngrok.com/get-started
根据自己的系统下载对应的版本
下载后解压文件并进入文件
使用cmd进入该目录下，并在官网上复制自己的auth
使用命令 ngrok -authtoken 密钥 -subdomain 二级域名 端口
ngrok http 8080 ::8080为你本地服务器的端口号最的访问生成的网址，就可以访问你的本地服务器。
1、ngrok简介
百度百科：ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。ngrok 可捕获和分析所有通道上的流量，便于后期分析和重放.
对于前端的我来说，这丫的讲的啥玩意...
1
其实说白了就是你写一个项目，在PC上完美运行，想在手机端访问，只能让手机电脑处于同一局域网内，但是这个技术可以把你的本地IP和端口（例如：localhost:8080）转换为www.baidu.com一样的万网，这样，即使电脑与手机不是在同一局域网内也可以无缝访问，（厉害吧！）。
很早我就想了解有没有这种技术，因为有时候写完项目了，感觉挺漂亮的，想让朋友看看，一直发愁怎么变成网址，（别跟我说转二维码），今天无意间在网上看到这种技术，搞了一下午，终于被我弄好了。废话不多说，直接进入正题。 2、版本简介
注意：使用前最好将防火墙关闭
1
软件：ngrox 可以选择三个版本：
ngrox国际版（就在官网下就行） ngrox 国内版 小米球ngrok(我感觉最好用的)
2.1ngrox国际版简介
ngrox官网服务器在国外，官网链接：https://dashboard.ngrok.com/get-started 进去注册一个账户，我直接用GitHub账户登陆的，注册之后登录显示如下：
在这里插入图片描述
从图片上可以看出，想要运行使用，得经过四个步骤：
1
第一步：下载 第二步：解压下载文件。 第三步：在程序文件夹下 dos命令，运行：
ngrok authtoken 5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8
1
其中5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8：这是隧道id（隧道id,就是图3中的） 运行完之后在本机C:\Users\taohang.ngrok2文件夹下出现ngrok.yml 内容是：authtoken: 5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8 表示：你的ngrok账户与本机绑定了
第四步：设置本地端口8080。dos命令，运行： ngrok http 8080 即可，这样你的本地端口就绑定好了。 第五步：$ ./ngrok help (查看帮助文档，可有可无)
另外：如果想要自定义域名，在安装程序目录下的DOS
自定义子域名：输入 ngrok http -subdomain=th 8080 会出现： Tunnel session failed: Only paid plans may bind custom subdomains. Failed to bind the custom subdomain ‘tkh’ for the account ‘Javath’. This account is on the ‘Free’ plan. 意思是，没有付钱，这是免费版，不能自定义域名，要是付过钱了，直接输入http://tkh.ngrok.io 就可以进入本地8080端口
没钱，还是使用免费版吧！ 1
输入：ngrok http 8080 会出现： Session Status online Account Javatkh (Plan: Free) Version 2.2.8 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://d5cd433a.ngrok.io -> localhost:8080 Forwarding https://d5cd433a.ngrok.io -> localhost:8080 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00 表示：这是免费版，Javatkh是GitHub账户名称，服务器地址在US（美国）， 在浏览器输入http://127.0.0.1:4040 就可以进入后台 在浏览器输入http://d5cd433a.ngrok.io 或者https://d5cd433a.ngrok.io 就可以访问本机8080端口
关于项目中的设置见小米球ngrok用法即可
2.2ngrox国内简介
因为国外服务器的速度限制，所有ngrox还有个国内的，叫做Sunny-Ngrok。
1
网站首页：https://www.ngrok.cc/_book/start/ngrok_windows.html 后台地址：https://www.ngrok.cc/user
现在网站呢注册好之后，登录后台地址，输入账户密码，如下：
1
在这里插入图片描述
使用： 第一种：在sunny.exe所在的目录 通过cmd命令行执行sunny.exe clientid 隧道id 多个隧道启动，执行：sunny.exe clientid 隧道id,隧道id 也就是中间加了个逗号 第二种：另一种方式通过 Sunny-Ngrok启动工具.bat 启动，直接输入隧道id就好了
Sunny-Ngrok 和ngrok不同的是:
它是国内的，只需要绑定隧道id即可使用，网速较快，而ngrok是国外的，网速较慢； Sunny-Ngrok端口配置是在后台界面配置的（后台界面->隧道管理），里面可以配置隧道id,隧道名称，隧道协议，本地端口，服务器类型，到期日期，赠送域名，还可以编辑，删除等
在链接好隧道id后，它会直接弹出配置好的本地端口所对应的万网链接地址，浏览器输入地址即可访问
2.3小米球ngrok(我感觉最好用的)
再程序目录下，shift右键，->在此处打开命令窗口，运行
ngrok -config=ngrok.cfg -subdomain taohang 8080
1
taohang 是你自定义的域名前缀，8080是端口
dos中会出现 Tunnel Status online Version 1.7/1.7 Forwarding http://taohang.ngrok.xiaomiqiu.cn -> 127.0.0.1:8080 Forwarding https://taohang.ngrok.xiaomiqiu.cn -> 127.0.0.1:8080 Web Interface 127.0.0.1:4040 Conn 19 Avg Conn Time 8769.42ms
http://taohang.ngrok.xiaomiqiu.cn 和 https://taohang.ngrok.xiaomiqiu.cn 就是你本地的8080端口
在浏览器输入后如果出现Invalid Host header （无效的请求头）
解决：我用的是webpack-cli运行的项目（Vue项目）。 ·1.在项目的根目录的package.json文件中若有"dev",若没有添加即可。 “dev”: “webpack-dev-server --content-base ./ –open --inline --hot–compress --history-api-fallback --config build/webpack.dev.config.js” 的后面添加–host 172.20.10.2（填你自己的ip地址）。 也就是在最后一行大括号前面添加:
"dev": "webpack-dev-server --content-base ./ --open --inline --hot--compress --history-api-fallback --config build/webpack.dev.config.js --host 172.20.10.2"
1
这样就能通过ip访问了。 2.但是通过服务器域名访问时还是显示 Invalid Host header，这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname 不是配置内的，将中断访问。
解决：可以在build目录中的webpack.base.config.js中module.exports = { } 对象下，添加属性如下
devServer: { disableHostCheck: true, },
1 2 3
若是出现手机端无加载资源现象，则是因为接口写的是localhost/127.0.0.1 换成上面的172.20.10.2（自己的IP即可）
（这段没用）为什么直接输入他给的网址即可进入首页？
1
是因为直接输入localhost:8080也能直接进入首页， 我在router/index.js文件里，设置了重定向 export default new Router({ routes: [ // 第一个对象可以不要 { path: ‘/’, name: ‘随便起名字’, // 重定向 默认使用book页面 redirect:’/book’ },] )}
小米ngrok下载地址参考： http://ngrok.ciqiuwl.cn/ ————————————————
