ngrok诊断指南.md 5.9 KB

ngrok 问题诊断指南

问题现象

没有任何日志输出,说明请求根本没有到达 Spring Boot 应用。

快速诊断步骤

1. 确认后端应用正在运行

Windows PowerShell 或 CMD:

netstat -ano | findstr :8080

应该看到类似输出:

TCP    0.0.0.0:8080           0.0.0.0:0              LISTENING       12345

如果没有输出 → 后端应用没有启动,请先启动应用!


2. 测试本地接口(绕过ngrok)

使用 curl 测试:

curl -X POST "http://localhost:8080/api/wechat/login" -H "Content-Type: application/json" -d "{\"code\":\"test\"}"

或者使用 Postman:

  • URL: http://localhost:8080/api/wechat/login
  • Method: POST
  • Body: {"code":"test"}

如果本地测试也失败 → 问题在后端应用本身,不是ngrok的问题 如果本地测试成功 → 继续下一步,问题在ngrok配置


3. 检查ngrok配置

3.1 确认ngrok正在运行

netstat -ano | findstr :4040

3.2 打开ngrok Web界面

在浏览器打开:http://localhost:4040

3.3 检查ngrok转发配置

在ngrok Web界面顶部,应该显示:

Forwarding  https://xxx.ngrok-free.dev -> http://localhost:8080

关键检查点:


4. 检查ngrok启动命令

正确的ngrok启动命令应该是:

ngrok http 8080

或者指定hostname:

ngrok http 8080 --hostname=your-domain.ngrok-free.dev

常见错误:

  • ngrok http 8081 → 端口错误
  • ngrok http localhost:8080 → 格式错误(不需要localhost)
  • ngrok tcp 8080 → 协议错误(应该用http)

5. 检查ngrok Traffic Inspector

http://localhost:4040 页面:

5.1 查看请求列表

  • 左侧应该显示所有通过ngrok的请求
  • 如果列表为空 → ngrok没有收到任何请求(前端问题)

5.2 点击一个请求查看详情

查看以下信息:

Request URL:

  • 应该是:https://xxx.ngrok-free.dev/api/wechat/case/stepCode/dealings?stepCode=500
  • 注意:URL中必须包含 /api(这是你的context-path)

Response Status:

  • 200 → 请求成功
  • 401 → 认证失败(Token问题)
  • 404 → 路径不存在(可能是URL错误)
  • 502 Bad Gatewayngrok无法连接到后端!
  • 504 Gateway Timeout → 后端响应超时
  • 没有响应 → 请求可能被ngrok拦截

Response Body:

  • 如果是HTML页面(包含"ngrok"字样)→ ngrok显示警告页面,需要点击"Visit Site"
  • 如果是JSON → 正常响应

6. ngrok常见问题及解决方案

问题1:502 Bad Gateway

原因: ngrok无法连接到 http://localhost:8080

解决方案:

  1. 确认后端应用正在运行(步骤1)
  2. 尝试使用 127.0.0.1 而不是 localhost

    ngrok http 127.0.0.1:8080
    
  3. 检查Windows防火墙是否阻止了8080端口

问题2:ngrok显示警告页面

原因: ngrok免费版会显示警告页面

解决方案:

  1. 在请求头中添加:ngrok-skip-browser-warning: true
  2. 或者在浏览器中点击"Visit Site"按钮
  3. 或者使用ngrok付费版本

问题3:请求被ngrok拦截或缓存

原因: ngrok可能缓存了响应

解决方案:

  1. 在请求头中添加:Cache-Control: no-cache
  2. 重启ngrok:按 Ctrl+C 停止,然后重新启动

问题4:URL路径错误

原因: 前端请求的URL不正确

检查点:

  • 后端context-path是 /api
  • 完整URL应该是:https://xxx.ngrok-free.dev/api/wechat/...
  • 注意: URL中必须包含 /api

常见错误:

  • https://xxx.ngrok-free.dev/wechat/... → 缺少 /api
  • https://xxx.ngrok-free.dev/api/wechat/... → 正确

7. 完整测试流程

步骤1:启动后端应用

# 在IDEA中运行,或使用Maven
mvn spring-boot:run

检查启动日志:

  • 应该看到:Tomcat started on port(s): 8080 (http)
  • 应该看到:RequestLoggingFilter 初始化完成

步骤2:启动ngrok

ngrok http 8080

检查ngrok输出:

  • 应该显示:Forwarding https://xxx.ngrok-free.dev -> http://localhost:8080

步骤3:测试本地接口

curl -X GET "http://localhost:8080/api/wechat/case/stepCode/dealings?stepCode=500" -H "Authorization: HDU your-token"

如果成功 → 后端正常,问题在ngrok 如果失败 → 后端有问题,检查后端日志

步骤4:测试ngrok接口

curl -X GET "https://xxx.ngrok-free.dev/api/wechat/case/stepCode/dealings?stepCode=500" -H "Authorization: HDU your-token" -H "ngrok-skip-browser-warning: true"

检查:

  • 后端日志是否有输出?
  • ngrok Traffic Inspector中是否有请求记录?

最可能的原因

根据你的情况(完全没有日志),最可能的原因是:

  1. ngrok配置错误 - 转发的端口不对(如8081而不是8080)
  2. ngrok没有正确启动 - ngrok进程异常
  3. URL路径错误 - 前端请求的URL缺少 /api
  4. ngrok无法连接后端 - 防火墙或网络问题

立即执行的检查

  1. ✅ 运行 诊断脚本.bat(已创建)
  2. ✅ 打开 http://localhost:4040 查看ngrok状态
  3. ✅ 检查ngrok启动命令:ngrok http 8080
  4. ✅ 检查前端请求的URL是否包含 /api
  5. ✅ 查看ngrok Traffic Inspector中的请求详情

如果仍然无法解决

请提供以下信息:

  1. 后端启动日志(特别是端口监听信息)
  2. ngrok启动输出(Forwarding那一行)
  3. ngrok Traffic Inspector截图(请求详情页面)
  4. 前端请求代码(URL和请求头)
  5. 运行 诊断脚本.bat 的输出