此方案为同事探究得出,现本人即将离职,特此记录下该方案,以备后续查找。
解决的问题
- 微信js-sdk初始化需要校验域名,本地调试无法通过,需伪装成生产/测试时访问的域名
- 也适用于抓取手机端的请求,在PC端进行分析(Charles)
方案思路要点
- 修改Host, 使得目标域名映射到本机(127.0.0.1)
- nginx开启HTTPS server,将目标域名proxy_pass到要测试的项目本地地址(如http://localhost:8080)
- 手机通过Charles代理到电脑本机
修改Hosts
sudo vi /etc/hosts
# 添加目标域名映射
127.0.0.1 [target-host-name]
安装nginx
建议通过Homebrew安装
brew install nginx
nginx -v
nginx -h
成功安装截图
# 成功安装后摘录如下
Docroot is: /usr/local/var/www
The default port has been set in: /usr/local/etc/nginx/nginx.conf to 8080 so that nginx can run without sudo
nginx will load all files in /usr/local/etc/nginx/servers/.
可以修改下默认端口,然后跑nginx
启动, 可以在浏览器看到默认的http server
,表示nginx安装好了,没什么问题。
mkcert生成ssl证书
要开启https server
,需要有ssl证书,使用mkcert可以在本地安装证书。
mkcert: https://github.com/FiloSottil...
生成证书的方式,请通读其README,主要了解安装、生成证书命令、安装CA命令
建议将证书放到nginx安装目录下usr/local/etc/nginx/ssl,命名自行根据实际命名即可。
mkcert -key-file [key.pem] -cert-file [cert.pem] [target-host-name] [target-host-name]
配置https server
...
http {
...
# HTTPS server
server {
listen 443 ssl;
server_name [target-host-name];
proxy_buffering off;
ssl_certificate /usr/local/etc/nginx/ssl/[cert.pem];
ssl_certificate_key /usr/local/etc/nginx/ssl/[key.pem];
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
root html;
index index.html index.htm;
proxy_pass [本地服务,如 http://localhost:8080];
}
}
}
设置完毕重启nginx, 访问目标域名,若能访问到你开启的本地服务,则表示设置好了。
nginx常用命令
请通过nginx -h
查看
# 启动nginx
nginx
# 重启nginx
nginx -s reload
# 退出nginx
nginx -s quit
Charles
安装Charles,分别在电脑和手机安装Charles证书,参考:此处-掘金文章
手机添加Charles连接:Help - SSL proxying - Install Charles Root Certificate On a Mobile Device or Remote Browser, 然后按提示:
- 设置代理,手机连接到与电脑同一wifi, 并设置代理
- 访问
chls.pro/ssl
下载证书,并安装证书(若安装失败,需自行找适合你所使用手机的安装方式,参考:https://www.jianshu.com/p/59c... R15是进入WLAN, 拉到底部有个"高级设置" - 安全证书管理 从存储设备安装,选择下载的证书并安装)
完毕后,通过手机访问目标域名,查看Charles的抓包,看对应的请求Remote Address是否为[target-host-name]/127.0.0.1:443
, Client Address 则为手机的地址。
至此,就成功使得在手机上访问目标域名,实际上访问的是电脑开启的本地服务,达到了可以调试微信js-sdk的目的。
二次使用时大致流程
- 确认hosts域名映射
- 确认nginx https-server是否开启
- 确认要调试的本地服务是否开启
- 确认Charles打开
- 确认手机开启代理,且证书没有问题
注意事项
- 连接的WI-FI不能开启fanqiang
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。