Flutter中http请求抓包的完美解决方案

前言

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

  • 确定使用的是http发起的get请求,理论上http协议应该可以被Charles抓到包的,如果没有抓到包,那可能是没有走代理,于是乎通过将笔记本连接的wifi断开测试了一下手机上APP发起http请求,发现请求成功,证实确实没有走代理;
  • 为什么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, int 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;
 }
 } else if (url.scheme == "https") {
 String proxy = environment["https_proxy"];
 if (proxy == null) proxy = environment["HTTPS_PROXY"];
 if ((proxyCfg = checkProxy(proxy)) != null) {
 return proxyCfg;
 }
 }
 return "DIRECT";
}

从以上代码中可以发现代理配置从environment中读取,设置代理时必须指定http_proxy或https_proxy等。而从_openUrl方法实现中proxyConf = new _ProxyConfiguration(_findProxy(uri));得出默认情况下environment是为空的,所以要想在Flutter的http请求中使用代理,则要指定相应的代理配置,即设置httpClient.findProxy的值。

示例代码:

_getHttpData() async {
 var httpClient = new HttpClient();
 httpClient.findProxy = (url) {
 return HttpClient.findProxyFromEnvironment(url, environment: {"http_proxy": 'http://192.168.124.7:8888',});
 };
 var uri =
 new Uri.http('t.weather.sojson.com', '/api/weather/city/101210101');
 var request = await httpClient.getUrl(uri);
 var response = await request.close();
 if (response.statusCode == 200) {
 print('请求成功');
 var responseBody = await response.transform(Utf8Decoder()).join();
 print('responseBody = $responseBody');
 } else {
 print('请求失败');
 }
}

以上代码设置后即可使用Fiddler或Charles抓包了。

注:

  • 代码中已设置代理,手机wifi不再需要进行代理设置;
  • 192.168.124.7该IP为我们需要抓包的Charles所在电脑IP;

第二种抓包解决方案

如果使用Flutter写的APP不手动设置代理,则可以使用另一种方案来抓包。

通过电脑设置热点 -> 使用手机连接电脑热点上网 -> 在电脑上使用Wireshark抓数据包。

具体步骤如下(macOS系统下):

1. 打开系统偏好设置,找到“共享”

2. 打开“共享”,显示以下窗口,并选择共享以下来源的连接为指定的有线网络,用以下端口共享给电脑选择为Wi-Fi

3. 点击右下角Wi-Fi选项按钮,显示如下,填写对应信息后点击“好”保存

4. 回到刚才的“共享”窗口,打开左侧窗口中的服务“互联网共享”

5. 然后打开Wireshark软件界面,首页选择对应开热点的网络双击

6. 请求接口域名t.weather.sojson.com对应的IP为 58.222.18.24,则在上面输入框中输入请求过滤条件 "ip.dst == 58.222.18.24",然后通过手机APP发起网络请求

查看接口的IP地址

$ ping t.weather.sojson.com
PING nm.ctn.aicdn.com (58.222.18.24): 56 data bytes
64 bytes from 58.222.18.24: icmp_seq=0 ttl=54 time=16.792 ms
64 bytes from 58.222.18.24: icmp_seq=1 ttl=54 time=16.926 ms
64 bytes from 58.222.18.24: icmp_seq=2 ttl=54 time=15.804 ms

7. 选择对应的http请求,箭头指定行,右键点击,选择Follow->HTTP Stream选项

8. 弹出具体网络请求信息窗口如下

写在最后

本篇分享了两种Flutter中http数据包的抓包解决方案,大家可以根据实际情况来选择使用。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

时间: 2019-03-12

Flutter中ListView 的使用示例

这个小例子使用的是豆瓣 API 中 正在上映的电影 的开放接口,要实现的主要效果如下: JSON 数据结构 Item 结构 Item 的结构是一个 Card 包含着一个 Row 然后这个 Row 里面左边是一个 Image ,右边是一个 Column 功能实现 material 库 Json 解析 网络请求 加载菊花 要实现上面四个功能,我们首先需要在 .dart 文件中引入如下代码 import 'dart:convert'; import 'package:http/http.dart' a

Flutter质感设计之底部导航

BottomNavigationBar即底部导航栏控件.显示在应用底部的质感设计控件,用于在少量视图中切换.底部导航栏包含多个以标签.图标或两者搭配的形式显示在项目底部的项目,提供了应用程序的顶级视图之间的快速导航.对于较大的屏幕,侧面导航可能更好. 创建navigation_icon_view.dart文件,定义一个NavigationIconView类,用于管理BottomNavigationBarItem(底部导航栏项目)控件的样式.行为与动画. import 'package:flutt

Flutter质感设计之弹出菜单

PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单. import 'package:flutter/material.dart'; class MenusDemo extends StatefulWidget { @override _MenusDemoState createState() => new _MenusDemoState(); } class _MenusDemoState extends State<MenusDemo> { String _body

Flutter实现底部导航栏效果

大家最近都在讨论新鲜技术-flutter,小编也在学习中,遇到大家都遇到的问题,底部导航.下面给大家贴出底部导航的编写,主要参考了lime这个项目. 上代码 一.在main.dart文件中 定义APP的基本信息 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new

Flutter进阶之实现动画效果(一)

上一篇文章我们了解了Flutter的动画基础,这一篇文章我们就来实现一个图表的动画效果. 首先,我们需要创建一个新项目myapp,然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(Bui

Flutter质感设计之持久底部面板

持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板.可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板. import 'package:flutter/material.dart'; class MyApp extends StatefulWidget { @override _MyApp createState() => new _MyApp(); } class _MyApp extends S

Flutter质感设计之进度条

LinearProgressIndicator控件是质感设计中的线性进度指示器,具体内容如下 import 'package:flutter/material.dart'; class ActionViewEcology extends StatelessWidget { /* * 构建函数,传递参数 * 最大能量值 * 最大饥饿值 * 最大情绪值 * 当前能量值 * 当前饥饿值 * 当前情绪值 */ ActionViewEcology({ this.maximumEmergy, this.ma

flutter实现仿boss直聘功能

Flutter是Google使用Dart语言开发的移动应用开发框架,使用一套Dart代码就能构建高性能.高保真的iOS和Android应用程序,并且在排版.图标.滚动.点击等方面实现零差异. 2年前,RN刚出来时做了个仿拉钩的demo,react-native-lagou. 这次flutter来了,想感受一下,索性用目前flutter的版本写的一个仿boss直聘应用. 时间有限,没完全仿照,去掉了一些功能,但是界面风格一致,有参考价值. github地址:flutter仿boss直聘. 感悟 与

Android仿Boss直聘文本日期混合滚轮选择器示例

1.需求分析 GitHub上面有一款iOS风格的滚轮选择器Android-PickerView,它分为时间选择器代码TimePickerView和选项选择器OptionsPickerView,不但可以选择时间日期,可以选择我们自定义的数据,比如性别.年龄等.我一直都用它.直到最近遇到了一个需求,它的选项里面既有文字也有时间,大体效果如Boss直聘添加项目经验中的时间选择功能: 从图中我们可以看出,除了常规的年份和月份的选择,选项中还包含了文本.其中,最新的时间是"至今",而最早可供选择

Flutter实现仿微信底部菜单栏功能

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MyHomePage(), ), ); } } class MyHomePage extends Sta

Scrapy框架爬取Boss直聘网Python职位信息的源码

分析 使用CrawlSpider结合LinkExtractor和Rule爬取网页信息 LinkExtractor用于定义链接提取规则,一般使用allow参数即可 LinkExtractor(allow=(), # 使用正则定义提取规则 deny=(), # 排除规则 allow_domains=(), # 限定域名范围 deny_domains=(), # 排除域名范围 restrict_xpaths=(), # 使用xpath定义提取队则 tags=('a', 'area'), attrs=(

python使用bs4爬取boss直聘静态页面

思路: 1.将需要查询城市列表,通过城市接口转换成相应的code码 2.遍历城市.职位生成url 3.通过url获取列表页面信息,遍历列表页面信息 4.再根据列表页面信息的job_link获取详情页面信息,将需要的信息以字典data的形式存在列表datas里 5.判断列表页面是否有下一页,重复步骤3.4:同时将列表datas一直传递下去 6.一个城市.职位url爬取完后,将列表datas接在列表datas_list后面,重复3.4.5 7.最后将列表datas_list的数据,遍历写在Excel

ThinkPHP实现ajax仿官网搜索功能实例

本文实例讲述了ThinkPHP实现ajax仿官网搜索功能的方法.分享给大家供大家参考. 具体实现方法如下: 后台代码: 复制代码 代码如下: //搜索,如果在1不在0  function search(){      $keyword = $_POST['search'];      $Goods=M('goods');    //这里我做的一个模糊查询到名字或者对应的id,主要目的因为我这个系统是    //商城系统里面用到直接看产品ID      $map['goods_id|goods_n

iOS高仿微信表情输入功能代码分享

最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实现的过程中遇到了很多小问题,接下来会一一介绍遇到过的坑.先上一张效果图: 一.实现表情选择View(WKExpressionView) 具体的实现就不细说了,主要功能就是点击表情时,将对应表情的图片名称通知给delegate. 二.实现表情textView(WKExpressionTextView)

iOS中仿QQ侧滑菜单功能

UITabBarController做QQ侧滑菜单效果: 首先要了解UITabBarController的层级结构: UITabBarController加载的其它UIViewController的View都是被添加在UITransitionView上(这是一个私有API),UITransitionView在self.view的0层,UITabBar在的第一层. 所以我的思路是这样的: UITransitionView与UITabBar转移到一个新的View1上去,作为滑动的部分: 在View1

JS实现仿百度文库评分功能

百度文库分享平台大家都知道,今天小编通过一段实例代码给大家介绍基于js实现百度文库评分功能,先给大家展示效果图吧. 具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

Android仿微信语音聊天功能

本文实例讲述了Android仿微信语音聊天功能代码.分享给大家供大家参考.具体如下: 项目效果如下: 具体代码如下: AudioManager.java package com.xuliugen.weichat; import java.io.File; import java.io.IOException; import java.util.UUID; import android.media.MediaRecorder; public class AudioManager { private