Flutter 中 http 请求抓包解决方案，揭秘今年 Android 春招面试必问问题有哪些

前言

前阵子有同学反馈 Flutter 中的 http 请求无法通过 fiddler 抓包，作者喜欢使用 Charles 抓包工具，于是抽时间写了个小 demo 测试了一下，结论是在手机上设置代理，Charles 确实抓不到请求数据包。于是对该问题进行了分析：

1. 确定使用的是 http 发起的 get 请求，理论上 http 协议应该可以被 Charles 抓到包的，如果没有抓到包，那可能是没有走代理，于是乎通过将笔记本连接的 wifi 断开测试了一下手机上 APP 发起 http 请求，发现请求成功，证实确实没有走代理；

2. 为什么 http 请求没有通过 wifi 走代理呢，因为之前安卓原生使用的一些 http 框架都是正常走代理的啊，那是不是有可能代码中有 api 方法可以设置请求不走代理，于是乎就研读了一下 Flutter 中 http 相关的源码，最终找到了答案。

http 请求源码跟踪

http.dart 中的 HttpClient 是一个抽象类，成员方法的具体实现在 http_impl.dart 中，http 的 get 请求实现如下：

Future<HttpClientRequest> getUrl(Uri url) => _openUrl("get", url);

Future<_HttpClientRequest> _openUrl(String method, Uri uri) {...// Check to see if a proxy server should be used for this connection.var proxyConf = const _ProxyConfiguration.direct();if (_findProxy != null) {// TODO(sgjesse): Keep a map of these as normally only a few// configuration strings will be used.try {proxyConf = new _ProxyConfiguration(_findProxy(uri));} catch (error, stackTrace) {return new Future.error(error, stackTrace);}}return _getConnection(uri.host, port, proxyConf, isSecure).then((_ConnectionInfo info) {...});}

首先，我们可以发现方法中有一行注释// Check to see if a proxy server should be used for this connection.，意思是“检查是否应该使用代理服务器进行此连接”；

然后，有一个proxyConf对象初始化和根据_findProxy来创建新的 proxyConf 对象的语句，然后通过_getConnection(uri.host, port, proxyConf, isSecure)来创建连接，_getConnection 的源码如下：

Future<_ConnectionInfo> _getConnection(String uriHost, i

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

nt uriPort,_ProxyConfiguration proxyConf, bool isSecure) {Iterator<_Proxy> proxies = proxyConf.proxies.iterator;

Future<_ConnectionInfo> connect(error) {if (!proxies.moveNext()) return new Future.error(error);_Proxy proxy = proxies.current;String host = proxy.isDirect ? uriHost : proxy.host;int port = proxy.isDirect ? uriPort : proxy.port;return _getConnectionTarget(host, port, isSecure).connect(uriHost, uriPort, proxy, this)// On error, continue with next proxy..catchError(connect);}

return connect(new HttpException("No proxies given"));}

从代码中我们可以看到根据代理配置信息来将请求的 host 和 port 进行重置，然后创建真实的连接。

跟踪以上源码我们发现 dart 中 http 请求是否走代理是需要配置的，而_findProxy变量和配置的代理信息有关。

http__impl.dart 文件中的_HttpClient 类中定义了_findProxy的默认值

Function _findProxy = HttpClient.findProxyFromEnvironment;

HttpClient 类中findProxyFromEnvironment方法的实现

static String findProxyFromEnvironment(Uri url,{Map<String, String> environment}) {HttpOverrides overrides = HttpOverrides.current;if (overrides == null) {return _HttpClient._findProxyFromEnvironment(url, environment);}return overrides.findProxyFromEnvironment(url, environment);}

_HttpClient 类中_findProxyFromEnvironment方法的实现

static String _findProxyFromEnvironment(Uri url, Map<String, String> environment) {checkNoProxy(String option) {if (option == null) return null;Iterator<String> names = option.split(",").map((s) => s.trim()).iterator;while (names.moveNext()) {var name = names.current;if ((name.startsWith("[") &&name.endsWith("]") &&"[${url.host}]" == name) ||(name.isNotEmpty && url.host.endsWith(name))) {return "DIRECT";}}return null;}

checkProxy(String option) {if (option == null) return null;option = option.trim();if (option.isEmpty) return null;int pos = option.indexOf("://");if (pos >= 0) {option = option.substring(pos + 3);}pos = option.indexOf("/");if (pos >= 0) {option = option.substring(0, pos);}// Add default port if no port configured.if (option.indexOf("[") == 0) {var pos = option.lastIndexOf(":");if (option.indexOf("]") > pos) option = "option:1080";} else {if (option.indexOf(":") == -1) option = "option:1080";}return "PROXY $option";}

// Default to using the process current environment.if (environment == null) environment = _platformEnvironmentCache;

String proxyCfg;

String noProxy = environment["no_proxy"];if (noProxy == null) noProxy = environment["NO_PROXY"];if ((proxyCfg = checkNoProxy(noProxy)) != null) {return proxyCfg;}

if (url.scheme == "http") {String proxy = environment["http_proxy"];if (proxy == null) proxy = environment["HTTP_PROXY"];if ((proxyCfg = checkProxy(proxy)) != null) {return proxyCfg;}