手机通过Charles用线上域名访问PC本地项目

最近调试微信公众号，由于微信授权需要线上正式环境的域名，笔者想把手机公众号网页重定向到PC本地localhost调试。

该方法通过Charles代理转发，适用所有需要域名重定向的场景，例如手机通过在线域名查看pc本地项目，微信开发者工具调试公众号等。

先开启本地服务，如果是vue项目，直接运行 npm start 就好了。

 

打开Charles（下载地址），点击 Tools > Map Remote，在弹出窗里点击add添加一条重定向规则，如下图：

from是你要重定向的域名（生产环境域名/外网域名），to就是你本地的项目地址（http://localhost:8080）。

from域名结尾需要加上 /* 匹配。

记得勾上Enable，点击OK保存。

打开PC网络看看你的局域网IP是多少：

之后打开手机，连上WiFi，确保手机跟PC是在同一个局域网内。

然后设置代理为手动，主机名填入PC的IP地址，端口8888，点击连接。

连接成功后，在手机端微信或者浏览器打开你要重定向的地址（生产环境域名/外网域名），这时候 Charles 会弹出一个提示框，点allow确定：

 

好了，这时候手机上打开的网页就是你的localhost了。