Flutter配置代理抓包實現過程詳解
背景
在開發Flutter中,我們經常需要對網絡請求進行調試,而Flutter自帶的devtool的network又不太好用,有時會出現請求成功,但是又看不到response返回(難道是我姿勢不對?)。於是我就嘗試通過抓包來查看請求
工具準備
- 安裝charles
- 有時我們需要抓https的請求,此時用charles抓包的內容是加密的,看不到明文,這時候需要安裝下Charles的證書來解決。點擊
help > SSL Proxying > Install Charles Root Certificate
,安裝到系統的鑰匙串中。(這裡借下瞭光哥小冊裡的截圖)
點擊證書,將信任選項改成始終信任
開啟charles的代理。開啟後,確認Proxy
選項卡與下方畫紅線的地方顯示一樣
配置Flutter代理
完成工具準備後,由於Flutter默認不走系統代理,所以我們還需要手動在Flutter
項目中配置代理,charles
才能正確抓到包。這裡提供兩種方案,一種是在請求庫的配置裡設置代理,另一種是利用Flutter
原生的類來完成
方式一、http請求庫配置代理
dio
配置代理
flutter項目裡通常用dio
庫做http請求,我們可以通過dio的httpClientAdapter
屬性配置我們的本地代理。代碼如下:
import 'package:dio/dio.dart'; var dio = Dio(); (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { client.findProxy = (uri) { return 'PROXY localhost:8888'; }; client.badCertificateCallback = (X509Certificate cert, String host, int port) => true; //忽略證書 };
其中client.findProxy
函數用來返回我們的代理接口,charles的默認的系統代理端口是8888
,所以這裡配置成
PROXY localhost:8888
就可以瞭。下面一句client.badCertificateCallback
函數也很關鍵,如果不進行配置,charles在抓包https請求時會出現下圖錯誤:
這個錯誤產生的原因,經我查閱網上資料是因為Flutter請求https時用的是自己的CA認證證書,所以charles在認證證書時沒有通過,導致抓包錯誤。所以我們直接通過client.badCertificateCallback
函數返回true
來忽略證書就好瞭。
web_socket_channel配置代理
有瞭上面dio
的配置後,還不夠,因為我們的websocket
請求還是無法抓包。如果你項目中需要抓取websocket
,可以使用web_socket_channel
這個庫。需要註意的是這個庫不能從官網拉取,因為官方的web_socket_channel
的還不支持代理,我在官方的代碼倉庫看到有幾個與支持代理相關的pr請求,但是官方都還沒有進行合並分支,所以我就自己fork倉庫修改瞭一下,我們可以改成以下方式進行安裝:
dependencies: web_socket_channel: git: url: https://github.com/IFreeOvO/web_socket_channel.git ref: master
然後我們開始配置web_socket_channel
,不過有瞭之前配置dio
的經驗後,我們配置web_socket_channel
也是使用瞭差不多的思路,代碼如下:
import 'package:web_socket_channel/io.dart'; // 創建一個自己的HttpClient對象 SecurityContext ctx = SecurityContext.defaultContext; HttpClient client = HttpClient(context: ctx) ..findProxy = ((uri) { return 'PROXY localhost:8888'; }) ..badCertificateCallback = (cert, host, port) { return true; }; _channel = IOWebSocketChannel.connect( 'wss://xxx.com', customClient: client, // 使用定制的HttpClient );
方式二、重寫原生方法
在入口文件main.dart
裡定義一個HttpOverrides
的子類,重寫它的createHttpClient
方法。原理也是一樣的,把findProxy
和badCertificateCallback
方法進行替換。然後掛載到全局。
// 重寫HttpOverrides class MyHttpOverrides extends HttpOverrides { @override HttpClient createHttpClient(SecurityContext? context) { var http = super.createHttpClient(context); http.findProxy = (uri) { return 'PROXY localhost:8888'; }; http.badCertificateCallback = (X509Certificate cert, String host, int port) => true; return http; } } void main() { HttpOverrides.global = MyHttpOverrides(); // 使用自己的HttpOverrides類 runApp(MyApp()); }
這種方案的好處是不受第三方請求庫限制,配置完後https
和websocket
都能正確抓包。效果如圖:
以上就是Flutter配置代理抓包實現過程詳解的詳細內容,更多關於Flutter配置抓包的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- goland 實現websocket server的示例代碼
- Flutter學習筆記(一)配置環境
- PHP實現RabbitMQ消息列隊的示例代碼
- C#使用HttpClient的正確方式你瞭解嗎
- mac使用Charles抓包安卓app環境搭建