前言
前陣子有同學(xué)反饋Flutter中的http請(qǐng)求無(wú)法通過(guò)fiddler抓包，作者喜歡使用Charles抓包工具，于是抽時(shí)間寫了個(gè)小demo測(cè)試了一下，結(jié)論是在手機(jī)上設(shè)置代理，Charles確實(shí)抓不到請(qǐng)求數(shù)據(jù)包。于是對(duì)該問(wèn)題進(jìn)行了分析：
- 確定使用的是http發(fā)起的get請(qǐng)求，理論上http協(xié)議應(yīng)該可以被Charles抓到包的，如果沒(méi)有抓到包，那可能是沒(méi)有走代理，于是乎通過(guò)將筆記本連接的wifi斷開(kāi)測(cè)試了一下手機(jī)上APP發(fā)起http請(qǐng)求，發(fā)現(xiàn)請(qǐng)求成功，證實(shí)確實(shí)沒(méi)有走代理；
- 為什么http請(qǐng)求沒(méi)有通過(guò)wifi走代理呢，因?yàn)橹鞍沧吭褂玫囊恍﹉ttp框架都是正常走代理的啊，那是不是有可能代碼中有api方法可以設(shè)置請(qǐng)求不走代理，于是乎就研讀了一下Flutter中http相關(guān)的源碼，最終找到了答案。
http請(qǐng)求源碼跟蹤
http.dart中的HttpClient是一個(gè)抽象類，成員方法的具體實(shí)現(xiàn)在http_impl.dart中，http的get請(qǐng)求實(shí)現(xiàn)如下：
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) {
.
.
.
});
}首先，我們可以發(fā)現(xiàn)方法中有一行注釋// Check to see if a proxy server should be used for this connection.，意思是“檢查是否應(yīng)該使用代理服務(wù)器進(jìn)行此連接”；
然后，有一個(gè)proxyConf對(duì)象初始化和根據(jù)_findProxy來(lái)創(chuàng)建新的proxyConf對(duì)象的語(yǔ)句，然后通過(guò)_getConnection(uri.host, port, proxyConf, isSecure)來(lái)創(chuàng)建連接，_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"));
}從代碼中我們可以看到根據(jù)代理配置信息來(lái)將請(qǐng)求的host和port進(jìn)行重置，然后創(chuàng)建真實(shí)的連接。
跟蹤以上源碼我們發(fā)現(xiàn)dart中http請(qǐng)求是否走代理是需要配置的，而_findProxy變量和配置的代理信息有關(guān)。
http__impl.dart文件中的_HttpClient類中定義了_findProxy的默認(rèn)值
Function _findProxy = HttpClient.findProxyFromEnvironment;HttpClient類中findProxyFromEnvironment方法的實(shí)現(xiàn)
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方法的實(shí)現(xiàn)
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";
}從以上代碼中可以發(fā)現(xiàn)代理配置從environment中讀取，設(shè)置代理時(shí)必須指定http_proxy或https_proxy等。而從_openUrl方法實(shí)現(xiàn)中proxyConf = new _ProxyConfiguration(_findProxy(uri));得出默認(rèn)情況下environment是為空的，所以要想在Flutter的http請(qǐng)求中使用代理，則要指定相應(yīng)的代理配置，即設(shè)置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('請(qǐng)求成功');
var responseBody = await response.transform(Utf8Decoder()).join();
print('responseBody = $responseBody');
} else {
print('請(qǐng)求失敗');
}
}以上代碼設(shè)置后即可使用Fiddler或Charles抓包了。
注：
- 代碼中已設(shè)置代理，手機(jī)wifi不再需要進(jìn)行代理設(shè)置；
- 192.168.124.7該IP為我們需要抓包的Charles所在電腦IP；
第二種抓包解決方案
如果使用Flutter寫的APP不手動(dòng)設(shè)置代理，則可以使用另一種方案來(lái)抓包。
通過(guò)電腦設(shè)置熱點(diǎn) -> 使用手機(jī)連接電腦熱點(diǎn)上網(wǎng) -> 在電腦上使用Wireshark抓數(shù)據(jù)包。
具體步驟如下（macOS系統(tǒng)下）：
1. 打開(kāi)系統(tǒng)偏好設(shè)置，找到“共享”
2. 打開(kāi)“共享”，顯示以下窗口，并選擇共享以下來(lái)源的連接為指定的有線網(wǎng)絡(luò)，用以下端口共享給電腦選擇為Wi-Fi
3. 點(diǎn)擊右下角Wi-Fi選項(xiàng)按鈕，顯示如下，填寫對(duì)應(yīng)信息后點(diǎn)擊“好”保存
4. 回到剛才的“共享”窗口，打開(kāi)左側(cè)窗口中的服務(wù)“互聯(lián)網(wǎng)共享”
5. 然后打開(kāi)Wireshark軟件界面，首頁(yè)選擇對(duì)應(yīng)開(kāi)熱點(diǎn)的網(wǎng)絡(luò)雙擊
6. 請(qǐng)求接口域名t.weather.sojson.com對(duì)應(yīng)的IP為 58.222.18.24，則在上面輸入框中輸入請(qǐng)求過(guò)濾條件 "ip.dst == 58.222.18.24"，然后通過(guò)手機(jī)APP發(fā)起網(wǎng)絡(luò)請(qǐng)求
查看接口的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. 選擇對(duì)應(yīng)的http請(qǐng)求，箭頭指定行，右鍵點(diǎn)擊，選擇Follow->HTTP Stream選項(xiàng)
8. 彈出具體網(wǎng)絡(luò)請(qǐng)求信息窗口如下
寫在最后
本篇分享了兩種Flutter中http數(shù)據(jù)包的抓包解決方案，大家可以根據(jù)實(shí)際情況來(lái)選擇使用。
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)html5模板網(wǎng)的支持。