配置Charles 設置手機代理並容許https請求

前言

• 在h5開發調試時，爲實現手機app訪問localhost地址，能夠使用ip地址的方式，但通常公司app出於安全考慮，會限制只能訪問其自有域名（例如美團app只能訪問xxx.meituan.com等）。所以，將localhost映射到xxx.meituan.com，並經過charles代理實現手機掃碼訪問

步驟

1. 用手機代理訪問某網頁
   • vim /etc/hosts 加一行：127.0.0.1 xhy.meituan.com
   • Charles--Proxy--Proxy Settings--Enable transparent HTTP proxy
   • 手機：設置--wifi--配置代理--手動代理
     • 服務器：電腦的ip地址
     • 端口：8888
   • 手機瀏覽一個網頁，charles彈窗點擊Allow
     • 若忘點擊或沒有彈窗，則重啓電腦 或 在Proxy--Access Control Settings中添加：0.0.0.0/0
2. Charles 設置容許抓https包：
   參考連接：https://blog.csdn.net/yangmeng13930719363/article/details/51645435

   • 電腦

     • 配置 Charles 根證書

       • Help--Install Charles Root Certificate

       • 以後會彈出鑰匙串，若是不彈出，請自行打開鑰匙串，以下圖：
         

       • 系統默認是不信任 Charles 的證書的，此時對證書右鍵，在彈出的下拉菜單中選擇『顯示簡介』，點擊使用此證書時，把使用系統默認改成始終信任，以下圖：
         

     • 配置SSL Proxy：Proxy--SSL Proxy Settings，填寫 Host: * Port: 443

   • 手機

     • 在移動設備上配置證書

       • Help--SSL Proxying--Install Charles Root Certificate
       • 打開手機瀏覽器（safari），輸入charlesproxy.com/getssl 會彈出以下界面，點擊「安裝」
         

     • 手機信任證書：通用->關於本機->證書信任設置->CA勾選

3. 在chrome中添加二維碼掃描插件，訪問網址時，點擊二維碼便可經過手機掃描