使用 ngrok 仅穿透前端实现个人项目公网访问

开发个人项目时，想让他人访问往往需要购买服务器、配置域名解析，成本高且流程繁琐。

本方案通过仅穿透前端即可实现内网个人项目的公网访问。

ngrok 账号注册与工具准备

在 https://ngrok.com/ 官网注册账号，获得免费 dev 结尾域名。

注册后下载对应压缩包。

在官网仪表盘复制专属 Authtoken。

分框架适配配置

Vite + React 项目

在 vite.config.js 添加 allowedHosts：

export default defineConfig({
  server: {
    allowedHosts: ['xxx.dev'] // ngrok 域名
  }
})

Umi Max + Ant Design Pro 项目

默认跑在 localhost:8000，需修改两个文件。

1. config/config.ts

添加 proxy 部分：

export default defineConfig({
  proxy: {
    '/api/': {
      target: 'http://localhost:[项目后端的端口号]',
      changeOrigin: true,
      // pathRewrite: { '^/api': '' },
    },
  },
});

此配置仅在 umi dev / npm run dev 时生效。

2. src/app.tsx

注释或删除 baseURL 相关配置：

export const request: RequestConfig = {
  withCredentials: true,
  headers: {
    : ,
  },
  ...errorConfig,
};