Ngrok 的详细使用步骤，从下载到配置和运行都覆盖到了。按照步骤操作，你可以快速将本地服务通过 Ngrok 暴露到外网

苦瓜大大王

已于 2024-12-09 19:32:09 修改

阅读量2.5k

点赞数 10

文章标签： javascript vue 前端 java

于 2024-12-09 19:26:39 首次发布

本文链接：https://blog.csdn.net/regretTAT/article/details/144355559

版权

Ngrok 教程：如何快速实现内网穿透

1. 什么是 Ngrok？

Ngrok 是一款非常实用的内网穿透工具，能够将本地服务映射到公网，方便远程访问。它特别适合开发者在调试 Web 服务、小程序接口等场景中使用。

2. 使用 Ngrok 的准备工作

2.1 注册并下载 Ngrok

访问官网：Ngrok 官网
注册账号：
- 点击 Sign Up 按钮，用邮箱或 Google 账户注册。
下载客户端：
- 登录后，访问下载页面。
- 选择对应操作系统（Windows、Mac 或 Linux），并下载。
解压文件：
- 下载后解压，确保文件夹中包含 ngrok 可执行文件。

3. Ngrok 配置步骤

3.1 获取认证令牌（Auth Token）

登录 Ngrok 后台，在用户页面中找到 Auth Token。
示例格式：
ngrok config add-authtoken YOUR_AUTH_TOKEN
打开终端，运行以下命令：
ngrok config add-authtoken <你的认证令牌>

3.2 启动本地服务

确保你的本地服务正在运行，例如：

前端项目：http://localhost:3000
后端服务：http://localhost:8000

启动 Ngrok，映射本地服务到公网：
ngrok http 3000

或者：
ngrok http 8000

3.3 查看外网地址

运行成功后，终端会显示以下内容：
Session Status online Account your-email@example.com Forwarding http://randomid.ngrok.io -> http://localhost:3000 https://randomid.ngrok.io -> http://localhost:3000

其中 http://randomid.ngrok.io 是你的外网地址，复制后即可通过公网访问。

4. Ngrok 免费版注意事项

随机地址：
- 免费版的域名每次启动都会随机生成。
- 如果需要固定域名，可以升级为付费版本。
带宽限制：
- 免费版限制每分钟的请求次数，适合小规模调试使用。

5. 高级用法

自定义端口映射

如果你的本地服务不是 HTTP 服务（例如 TCP 服务），可以运行：
ngrok tcp <端口号>

会生成一个类似 tcp://0.tcp.ngrok.io:12345 的外网地址。

查看实时访问日志

Ngrok 提供 Web 界面，可以实时查看请求日志和详细信息：
默认地址：http://127.0.0.1:4040

HBuilderX 运行异常问题及解决方法

1. Invalid Host header 错误

错误描述

在使用内网穿透工具（如 Ngrok）时，访问 HBuilderX 启动的本地服务，浏览器可能会报错：
Invalid Host header

解决方法

由于 HBuilderX 创建的项目默认没有 vue.config.js 文件，可以手动添加或修改项目配置：

添加 `vue.config.js`

在项目根目录创建 vue.config.js 文件。

添加以下内容：

module.exports = {
  devServer: {
    host: '0.0.0.0', // 开放外部访问
    port: 8080, // 替换为你的端口号
    disableHostCheck: true, // 禁用 Host 检查
  },
};

保存后，重新运行一遍即可