前些天提测新业务,QA反馈Flutter 页面不能抓包,以前看数据信息都是通过log收集,没有单独通过抓包查看数据,对QA来说不能抓包确实是问题。查了一下发现Dio框架是默认不允许抓包的,需要额外配置抓包设置的相关代理。
所以想要Flutter 抓包需要配置代理的IP 地址和 端口号,可以通过用户在Flutter 输入然后配置到 DefaultHttpClientAdapter
中,也可以通过Native层代码获取设置的代理之后通过数据通信传递到Flutter,然后再进行配置:
1. 手动配置端口号:
先通过抓包工具查看IP 和端口号
然后在Flutter 页面传递到网络框架层进行配置
2. 代码获取抓包代理:
Android 抓包获取代理:
@Override
public void onMethodCall(@NonNull MethodCall methodCall, @NonNull io.flutter.plugin.common.MethodChannel.Result result) {
switch (methodCall.method) {
case "getProxy":
String proxy = System.getProperty("http.proxyHost");
String port = System.getProperty("http.proxyPort");
Log.e("--------getProxy: ", proxy + " port: " + port);
Map<String, Object> setting = new HashMap();
setting.put("host", proxy);
setting.put("port", port);
result.success(setting);
break;
}
}
iOS端获取代理信息
// iOS获取手机代理
- (void)syncProxy{
//自动获取手机代理
NSString * portalBaseUrlStr = @"http://www.baidu.com";
NSDictionary *proxySettings = (__bridge NSDictionary *)(CFNetworkCopySystemProxySettings());
NSArray *proxies = (__bridge NSArray *)(CFNetworkCopyProxiesForURL((__bridge CFURLRef _Nonnull)([NSURL URLWithString:portalBaseUrlStr]), (__bridge CFDictionaryRef _Nonnull)(proxySettings)));
NSDictionary *settings = [proxies firstObject];
NSString *hostName = [NSString stringWithFormat:@"%@",settings[@"kCFProxyHostNameKey"]];
NSString *portName = [NSString stringWithFormat:@"%@",settings[@"kCFProxyPortNumberKey"]];
//获取为空时居然是字符串"(null)"
if ([hostName isEqualToString:@"(null)"]) {
hostName = @"";
}
if ([portName isEqualToString:@"(null)"]) {
portName = @"";
}
}
Flutter层接收代理:
static Future getProxy() async {
try {
MethodChannel platform =
MethodChannel(MethodChannelName.BASEINFO_CHANNEL);
var setting = {};
setting = await platform.invokeMethod("getProxy");
Logger("----------getProxy:setting" + setting.toString());
saveProxy(new Map<String, dynamic>.from(setting));
} on Exception catch (e) {
Logger("----------getProxy: e " + e.toString());
}
}
///保存代理
static void saveProxy(Map<String, dynamic> setting) async {
String proxyHost = setting['host'] ?? '';
String proxyPort = setting['port'] ?? '';
String proxyHostAndPort = 'PROXY ' + proxyHost + ':' + proxyPort;
}
接收代理的方法调用在网络请求前就获取,获取完在网络请求时进行配置:
static void setupProxy(Dio dio,String proxyHostAndPort) async {
if (proxyHostAndPort != null && proxyHostAndPort.isNotEmpty) {
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
(client) {
client.findProxy = (uri) {
return proxyHostAndPort;
};
//忽略证书
client.badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
};
}
}
proxyHostAndPort 是包含IP地址和端口号的字符串,如果没有代理就不设置代理
保存后,重新打开APP,这个时候就可以在charles中查看到新发起的请求报文及响应报文了。