零成本使用 ngrok 将前端项目暴露至公网
开发个人项目时，想让他人访问往往需要购买服务器、配置域名解析，成本高且流程繁琐。
本文介绍一种零成本方案 —— 仅穿透前端即可实现内网个人项目的公网访问。
ngrok 账号注册与工具准备
首先在 https://ngrok.com/ 官网注册一个账号，就能获得一个免费的 dev 结尾的域名。
注册好之后，下载对应的 zip 压缩包
在官网个人后台 / 仪表盘（Dashboard）可直接复制个人专属的 Authtoken。
分框架适配配置
如果前端是用 Vite + React 的项目，需要在 vite.config.js 文件加上 allowedHosts 这一行代码：
// vite.config.js
export default defineConfig({
server: {
allowedHosts: ['xxx.dev'], // ngrok 域名
},
});
如果前端是基于 Umi Max + Ant Design Pro 的项目，前端默认是跑在 localhost:8000（umi dev），则需要修改 2 个文件。
1.config/config.ts
在文件里加上如下 proxy 部分：
// config/config.ts
export default defineConfig({
// ... 其他配置 ...
proxy: {
'/api/': {
target: 'http://localhost:[项目后端的端口号]',
changeOrigin: true,
// 根据后端实际路由决定是否 rewrite
// 如果后端接口路径就是 /api/xxx 开头 → 不要 rewrite
// 如果后端是 /user/xxx（无 /api 前缀） → 加下面这行
// pathRewrite: { '^/api': '' },
},
},
// ... 其他配置 ...
});
这段只在 / 时生效。