跳到主要内容

内网穿透

  • 外部网络能够访问到内部网络中的服务

内网穿透方案​

  • ngrok
  • localtunnel
  • frp
  • vscode 本地端口转发

ngrok使用​

bash
# 安装
npm install ngrok -g
# 配置token
ngrok config add-authtoken xxxxxxxxxxxxxxx
# 转发端口
ngrok http 8080

localtunnel​

bash
npx localtunnel --port 8000

vscode 本地端口转发​

  • vscode官网文档

  • 1、先在本地启动你的项目服务

  • 2、然后切换到 端口视图，点击 转发端口 按钮。

  • 3、输入当前项目端口号

什么场景需要内网穿透？​

  • 远程协作时，同事或客户查看本地运行的项目。

  • 测试微信小程序=>支付回调或者真机调试

    • 让第三方接口可以成功回调返回本地 （让外部网络访问内部）

  • 本地开发联调外网

小程序支付回调​

  • 通过内网穿透可以让本地高效调试支付、第三方登录等依赖公网回调的功能，无需部署到线上环境

场景痛点​

  • 微信小程序支付、登录等接口要求回调地址必须是 公网 HTTPS 域名。
  • 开发阶段需在本地调试支付回调逻辑，但本地服务无法直接被微信服务器访问。

解决方案​

  • 使用 ngrok 的 HTTPS 地址 作为支付回调域名，穿透到本地服务。

具体步骤​

  1. 编写支付回调接口（Node.js 示例） 假设本地有一个处理微信支付回调的接口：

    js
    // server.js
    const express = require('express');
    const app = express();
    app.use(express.json());

    // 支付回调接口
    app.post('/wechat-pay-callback', (req, res) => {
      const { out_trade_no, total_fee } = req.body;
      console.log('收到支付回调:', { out_trade_no, total_fee });
      // 校验签名、更新订单状态等逻辑...
      res.send({ code: 'SUCCESS', message: 'OK' });
    });

    app.listen(3000, () => {
      console.log('本地服务运行在 http://localhost:3000');
    });

  2. 启动 ngrok 穿透 运行以下命令，暴露本地 3000 端口：

    bash
    ngrok http 3000

    获取生成的 HTTPS 地址（如 https://a1b2-34-56-78-90.ngrok-free.app）。

  3. 配置微信支付回调地址 在微信支付商户平台，将回调地址配置为：

    text
    https://a1b2-34-56-78-90.ngrok-free.app/wechat-pay-callback

  4. 测试支付流程 用户在小程序发起支付后，微信服务器会将支付结果推送到你的本地服务，实现实时调试。