Flutter Dio在 Charles等 抓包工具设置配置

前些天提测新业务，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 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.from(setting));
    } on Exception catch (e) {
      Logger("----------getProxy: e " + e.toString());
    }
  }

 ///保存代理
  static void saveProxy(Map 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中查看到新发起的请求报文及响应报文了。