使用 Charles 调试 Flutter 应用中的 Dio 网络请求

problc2025-01-16 16:18

为了成功使用 Charles 抓取并调试 Flutter 应用程序通过 Dio 发起的网络请求，需遵循特定配置步骤来确保应用程序能够识别 Charles 的 SSL 证书，并正确设置代理服务器。

配置 Charles 以支持 HTTPS 请求捕获

Charles 默认会拦截 HTTP 流量；对于 HTTPS，则需要额外启用 SSL 代理功能。进入 Proxy -> SSL Proxying Settings, 添加目标域名或 IP 地址到列表中以便允许这些地址下的流量被解密查看。

安装 Charles CA 证书至 Android 或 iOS 设备

为了让移动设备信任来自 Charles 的加密连接，在手机浏览器访问 chls.pro/ssl 下载安装根证书文件。这一步骤至关重要因为只有当客户端认可该中间件签发者身份之后才会同意其介入通信过程之中。

设置 Dio 进行手动代理转发

在 Dart 中操作 HttpClient 对象时可以通过修改默认构造函数内的 findProxy 属性指定自定义规则实现对不同 URL 实施差异化的路由策略。具体来说就是告诉 dio 将所有的外部访问都重定向给本地运行着 charles 的机器处理：

dart 复制代码

import 'package:dio/dio.dart';

void main() async {
  var dio = Dio(BaseOptions(
    proxyHeaders: false,
    findProxy: (url) => "PROXY localhost:8888", // 替换成实际电脑IP和端口
  ));

  try {
    Response response = await dio.get('https://example.com/api');
    print(response.data);
  } catch (e) {
    print(e.toString());
  }
}

以上代码片段展示了如何让 dio 使用 Charles 所监听的代理服务来进行 API 调用。注意这里的 "localhost" 可能要替换为开发者 PC 的局域网 IP 地址，而不仅仅是本机回环地址，尤其是在真机测试而非模拟器环境下工作时。