Flutter:Dio抓包配置

学习Flutter的一个月了,说好了写博客,才写完一篇就断更了,很尴尬。

Dio目前应该是Flutter最火的网络请求框架了,今天不分享网络请求实现,分享一下抓包。

抓包可以用Fiddler或者Charles,我当前的IP和Port为:192.168.0.85:8888
在手机的WIFI->代理->手动配置主机名和端口号。

按照Dio文档配置如下:

import 'package:dio/dio.dart';
import 'package:dio/adapter.dart';
...
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
  // config the http client
  client.findProxy = (uri) {
    //proxy all request to localhost:8888
    return 'PROXY localhost:8888';
  };
  // you can also create a HttpClient to dio
  // return HttpClient();
};

在实际抓包的时候发现,以上代码好像不生效,那是因为Flutter Dev Tools本身通过Socket与手机连接,解决方法如下:

  • 方法1 将localhost改为具体的IP,例如192.168.0.85,所以代码如下:

       import 'package:dio/dio.dart';
       import 'package:dio/adapter.dart';
       ...
       (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
         // config the http client
         client.findProxy = (uri) {
           //proxy all request to localhost:8888
           return 'PROXY 192.168.0.85:8888';
         };
         // you can also create a HttpClient to dio
         // return HttpClient();
       };
       ```
       这种方式个人开发还行,如果是团队开发或者线下测试就不太友好了。
    
    
  • 方法2. 配置设备监听的端口号,需要使用adb reverse tcp:8888 tcp:8888命令。
    这样配置有一个坏处就是adb重启就需要重新输入命令,对于没有安装adb工具的还是不友好。

  • 方法3. 结合方法1,动态配置代理。在Dio初始化之前,通过MethodChannel调用Android\IOS获取代理信息,动态配置Dio
    flutter端代码如下:

       Dio dio = Dio();
       MethodChannel channel = const MethodChannel('com.muzi.http.proxy');
       Future getHost = channel.invokeMethod('getProxyHost');
       Future getPort = channel.invokeMethod('getProxyPort');
       var result = await Future.wait([getHost, getPort]);
       if (result.length == 2 &&
           result[0] != null &&
           result[0]!.isNotEmpty &&
           result[1] != null &&
           result[1]!.isNotEmpty) {
         String host = result[0].toString();
         String port = result[1].toString();
         (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
             (HttpClient client) {
           client.findProxy = (uri) {
             return 'PROXY $host:$port';
           };
         };
       }
       ```
       android端代码如下:
       ```
       class HttpProxyPlugin(messenger: BinaryMessenger): MethodChannel.MethodCallHandler {
    
           private var channel: MethodChannel? = null
    
           init {
               channel = MethodChannel(messenger, "com.muzi.http.proxy")
               channel?.setMethodCallHandler(this)
           }
    
           override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
               when (call.method) {
                   "getProxyHost" -> result.success(getProxyHost())
                   "getProxyPort" -> result.success(getProxyPort())
               }
           }
    
           private fun getProxyHost(): String? {
               return System.getProperty("http.proxyHost")
           }
    
           private fun getProxyPort(): String? {
               return System.getProperty("http.proxyPort")
           }
       }
    
      > IOS端不会,找个人会的同学干吧。。。
    

    示例代码见GitHub

你可能感兴趣的:(flutter)