uni-app本地调试微信h5必须使用https域名,因微信强制要求网页授权域名备案且仅支持https;localhost、http、ip及自签名证书均被拦截。

uni-app 本地开发要调试微信 H5,必须走 HTTPS 域名,localhost 和 HTTP 都会被微信拦截——这不是配置问题,是微信的硬性安全策略。
为什么 localhost:8080 在微信里打不开
微信网页授权(包括静默授权 snsapi_base)要求回调地址必须是已备案、且在公众号后台「网页授权域名」中显式填写的 HTTPS 域名。它不认 IP、不认 localhost、不接受自签名证书(除非你手动信任),也不允许 HTTP。
- 真机访问时,
navigator.geolocation、微信 JS-SDK、地图 SDK 等能力会直接报错或失效,因为现代浏览器在非 HTTPS 下禁用敏感 API - 即使你用
host文件把mobile.example.com指向127.0.0.1,微信服务器仍无法回调到你本地,因为它根本不会发起请求 - 错误现象典型如:页面白屏、控制台卡在重定向、微信返回
redirect_uri parameter illegal或invalid redirect_uri
manifest.json 里必须加 disableHostCheck: true
uni-app 的 H5 开发服务基于 webpack-dev-server,而 ngrok/frp 映射过来的外网域名默认会被拒绝访问(Host 头校验失败)。不加这个,隧道能连上,但页面 403 或空白。
- 打开
manifest.json→ 切换到「源码视图」→ 找到"h5"节点 → 在"devServer"下添加:"disableHostCheck": true - 必须重启项目(
npm run dev:h5或 HBuilderX 中「重新运行」),热更新不生效 - 不要写成
"disable-host-check"或"disable_host_check",JSON 键名严格区分大小写和连字符 - 如果还报错,可额外加
"host": "0.0.0.0",让服务监听所有网卡(尤其在公司内网或双网卡环境)
ngrok 启动命令要带 --scheme https
ngrok 默认生成的是 HTTP 隧道,但微信只接受 HTTPS 回调。即使你本地是 HTTP,也必须让 ngrok 强制提供 HTTPS 入口,并由它代理加密流量。
- 启动命令示例:
ngrok http --scheme https 8080(假设你的 uni-app H5 服务跑在localhost:8080) - 输出里要看到类似
https://abc123.ngrok-free.app → http://localhost:8080,确认开头是https:// - 免费版 ngrok 会随机子域名,每次重启都变;如需固定,得绑定自定义域名并配置 DNS + TLS 证书(需付费或自己签发)
- 若用 frp,确保服务端
frps.ini开了vhost_https_port,客户端frpc.ini对应配type = https
公众号后台填域名时,只填二级域名,不带路径和协议
微信后台「公众号设置 → 公众号开发信息 → 网页授权域名」只接受纯域名格式,填错会导致授权流程中断。
- 正确示例:
abc123.ngrok-free.app(ngrok 免费域名)或tunnel.yourdomain.com(自定义域名) - 错误写法:
https://abc123.ngrok-free.app、abc123.ngrok-free.app/、http://abc123.ngrok-free.app、www.abc123.ngrok-free.app - 填完需保存,且 24 小时内最多修改 5 次;改完后等 1–2 分钟再测试,微信有缓存
- 如果你同时调试多个环境(家长端/教师端),得申请多个子域名并分别配置,不能共用一个
最易被忽略的一点:微信的「网页授权域名」和「JS 接口安全域名」是两个独立配置项,静默授权只依赖前者,但 JS-SDK(如分享、定位)还需要后者同步填入——漏配任何一个,对应功能就直接不可用。











