此方案為同事探究得出，現本人即將離職，特此記錄下該方案，以備後續查找。

解決的問題

• 微信js-sdk初始化需要校驗域名，本地調試無法通過，需偽裝成生產/測試時訪問的域名
• 也適用於抓取手機端的請求，在PC端進行分析（Charles）

方案思路要點

1. 修改Host, 使得目標域名映射到本機(127.0.0.1)
2. nginx開啓HTTPS server，將目標域名proxy_pass到要測試的項目本地地址(如http://localhost:8080)
3. 手機通過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