Flutter 开发中使用 Charles 抓取接口的奇招

引言

Flutter 凭借其跨平台开发能力和出色的性能，已成为移动应用开发领域的一颗耀眼新星。然而，在开发 Flutter 应用时，调试网络请求成为了一大难题。Charles，一款功能强大的网络代理工具，在这个过程中发挥着至关重要的作用。然而，不少 Flutter 开发者却遇到了一个困扰：使用 Charles 无法抓取 Flutter 应用发起的网络请求。

困境根源

Flutter 应用的网络请求默认使用 Dart 虚拟机 (VM) 自己的网络堆栈，绕过了系统网络堆栈，导致 Charles 无法拦截这些请求。

解决妙招

为了解决这个棘手的问题，需要对 Flutter 应用进行一些巧妙的配置：

1. 启用系统网络堆栈： 在 Flutter 项目的 pubspec.yaml 文件中，添加以下代码：

dependencies:
  flutter:
    sdk: flutter
  network_info_plus: 1.2.0

2. 配置网络信息插件： 导入 network_info_plus 插件并调用 setHttpOverrides 方法，指定使用系统网络堆栈：

import 'package:flutter/foundation.dart';
import 'package:network_info_plus/network_info_plus.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await NetworkInfo().setHttpOverrides();
  runApp(MyApp());
}

3. 在模拟器或真机上运行应用： 完成配置后，在模拟器或真机上运行 Flutter 应用。

4. 启用 Charles： 启动 Charles 并配置代理设置。

其他建议

除了上述解决方案，还有一些额外的建议可以提高 Charles 抓取 Flutter 接口的成功率：

• 使用 HTTPS：确保 Flutter 应用和服务器之间的通信使用 HTTPS，Charles 才可以通过 SSL Proxying 捕获请求。
• 检查代理设置：确保 Charles 代理已正确配置为系统代理。
• 尝试不同的设备：如果在特定设备上遇到问题，请尝试在其他设备上运行 Flutter 应用。
• 更新 Charles：确保使用最新版本的 Charles。

结语

通过遵循本文中提供的解决办法，Flutter 开发者可以轻松地使用 Charles 抓取 Flutter 应用发起的网络请求。这将极大地提高网络调试效率，助力构建更稳定可靠的移动应用。