微信小程序真机调试访问本地接口失败?用 natapp 做内网穿透(踩坑总结,超详细)
微信小程序真机调试时无法访问本地接口,这是因手机无法连接localhost。解决方法是用natapp进行内网穿透:注册账号后创建隧道,配置本地端口并获取公网地址;修改小程序接口地址为natapp提供的域名;需在微信开发者工具和公众平台配置合法域名。常见问题包括域名未配置、本地服务未启动等。通过手机浏览器测试公网地址可验证是否穿透成功。该方法能有效解决真机调试时的网络环境问题。
最近在做微信小程序的时候,遇到一个很常见的问题:
本地接口在电脑浏览器能访问,模拟器也正常,但是一到真机调试就请求失败。
查了半天,其实原因很简单:
手机访问不到你电脑的 localhost 或 127.0.0.1。
解决办法就是把本地服务映射成一个公网地址,这里记录一下用 natapp 的完整过程。
一、先明确目标
我们要做到的是:
把本地接口:
http://127.0.0.1:8080
变成:
http://xxxx.natappfree.cc
这样手机就可以访问了。
二、注册 natapp
打开官网:
注册账号,然后登录后台。
三、创建隧道
登录后创建一个免费隧道。

主要注意:
-
协议选 web
-
本地端口填写你的后端端口,比如 8080
创建后会生成一个 authtoken。
四、下载并启动 natapp
下载客户端,解压后进入目录。
打开命令行执行:
natapp -authtoken=你的token

看到下面类似内容说明启动成功:
Tunnel Status Online
Forwarding http://xxxx.natappfree.cc -> 127.0.0.1:8080

这里的 natappfree.cc 地址就是你的公网地址。
五、小程序里修改接口地址
把原来的:
http://127.0.0.1:8080/api
改成:
http://xxxx.natappfree.cc/api
六、很多人卡住的一步(一定要做)
打开微信开发者工具找到右上角三条杠

打开这个:

如果还是不行的话再试试这个方法:
进入微信公众平台后台-> 开发管理 -> 开发设置 -> 服务器域名
把 natapp 的地址加入 request 合法域名
七、怎么判断是否真的成功
直接用手机浏览器访问:
http://xxxx.natappfree.cc
如果能返回接口内容,说明已经打通。
八、几个容易踩的坑
1)natapp 显示 Online,但 Total Connections 一直是 0
说明手机根本没请求到服务器,大概率是域名没配置。
2)浏览器能访问,小程序不行
基本都是合法域名问题。
3)接口报错
检查本地服务是否启动,以及端口是否写对。
九、总结
真机调试访问不了本地接口不是代码问题,是网络环境问题。
用 natapp 做一次内网穿透,基本就解决了。
写这篇主要是给后面再遇到这个问题的自己留个记录,也希望能帮到同样卡在这里的人。
更多推荐
所有评论(0)