使用ngrok自定义域名的Telegram Mini App出现白屏问题求助

问题背景 #

使用ngrok http --domain=自定义域名 8000启动服务后，浏览器访问可正常加载所有JS和CSS，但Telegram Mini App打开后白屏，资源加载失败；改用ngrok 8000生成的随机域名时，两端都能正常加载。

排查与解决步骤 #

• 检查自定义域名SSL证书有效性
  启动ngrok后访问本地dashboard（http://localhost:4040），查看自定义域名的证书状态。Telegram WebView对SSL证书的校验比普通浏览器严格，若证书存在未信任、过期或域名不匹配的问题，会直接阻止资源加载。

• 确认资源引用路径为相对路径
  检查项目中JS、CSS的引用路径，确保使用相对路径（如./static/css/style.css）而非硬编码的随机域名绝对路径。硬编码路径会在切换自定义域名后失效，导致资源加载404。

• 验证Telegram Mini App域名白名单
  通过@BotFather进入Bot设置：/mybots -> 选择目标Bot -> Edit Bot -> Edit Mini Apps，确认你的自定义域名已添加到允许的域名列表中。未添加的域名会被Telegram拦截资源请求。

• 清除Telegram缓存并重启
  Telegram WebView会缓存旧的域名配置和资源，进入Telegram设置->数据和存储->清除缓存，重启后再测试自定义域名的Mini App。

• 配置后端CORS允许自定义域名
  确保本地8000端口的服务添加了CORS响应头，允许自定义域名的请求：

  Access-Control-Allow-Origin: https://你的自定义域名.ngrok.io
  

  随机域名可能默认在ngrok的CORS允许范围内，但自定义域名需要单独配置。

• 查看WebView控制台错误日志
  启用Telegram WebView调试：设置->高级->实验性设置->启用WebView调试，然后用Chrome浏览器打开chrome://inspect，找到对应的Telegram WebView实例，查看控制台的具体错误信息（如证书错误、404、CORS报错），精准定位问题。

内容的提问来源于stack exchange，提问作者Aleksandr