企业官网建设流程全解析

最近在做微信小程序的时候，遇到一个很常见的问题：

本地接口在电脑浏览器能访问，模拟器也正常，但是一到真机调试就请求失败。

查了半天，其实原因很简单：

手机访问不到你电脑的 localhost 或 127.0.0.1。

解决办法就是把本地服务映射成一个公网地址，这里记录一下用 natapp 的完整过程。

一、先明确目标

我们要做到的是：

把本地接口：

http://127.0.0.1:8080

变成：

http://xxxx.natappfree.cc

这样手机就可以访问了。

二、注册 natapp

打开官网：

https://natapp.cn

注册账号，然后登录后台。

三、创建隧道

登录后创建一个免费隧道。

主要注意：

• 协议选 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 做一次内网穿透，基本就解决了。

写这篇主要是给后面再遇到这个问题的自己留个记录，也希望能帮到同样卡在这里的人。