Flutter_学习记录_iOS 模拟器用Charles抓包

参考文章:
Flutter 使用Charles软件抓包

1. 前言

Flutter应用网络请求调试一直是业内难题,原因在于Dart语言标准库的网络请求不会走Wi-Fi代理,常规通过配置Wi-Fi代理来抓包的方式行不通。这给我们日常开发测试造成了很大的阻碍,严重降低工作效率。

2. 抓包解决方案

2.1 安装抓包工具Charles

请参考这个文章:charlse抓包和Mock数据

2.2 模拟器设置代理

首先,设置Charles允许抓包电脑数据,如下图设置:

其次,安装模拟器证书,如下图:

第三,打开模拟器的safari, 输入http://chls.pro/ssl, 安装证书,然后在模拟器的设置->通用->关于本机->证书信任设置,打开Charles的证书信任:

2.3 代码设置代理

通过如下步骤,查看本地网络的代理端口:

记住这个数据:

在代码中配置网络转发的端口, 我是在第一次网络请求的页面中配置的,代码如下:

dart 复制代码
import 'package:flutter/material.dart';
// 网络请求
import 'package:dio/dio.dart';
import 'package:dio/io.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  final dio = Dio();
  
  @override
  void initState() {
    super.initState();

    // TODO: --设置代理的地方,等待删除
     (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { 
          client.findProxy = (uri) {
            return 'PROXY 192.168.1.4:8888';
          };
     };
    // 获取轮播图的数据
    _getSwipterDataRequest();
    // 获取猜你喜欢的数据
    _getGuessYouLikeDataRequest();
  }
}

2.4代码解读

其中发挥作用的是,这几句代码:

dart 复制代码
final dio = Dio();
    // TODO: --设置代理的地方,等待删除
     (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { 
          client.findProxy = (uri) {
            return 'PROXY 192.168.1.4:8888';
          };
     };

其中192.168.1.4:8888 这个值是步骤2.3 让记住的端口, 同时也说明了:再次启动charles时,如果charles的端口变了,代码的设置的'PROXY 192.168.1.4:8888'这个值也要跟着变。

大概得设置就是这样~

相关推荐
猛扇赵四那边好嘴.2 小时前
Flutter 框架跨平台鸿蒙开发 - 非遗文化查询:传承中华文化瑰宝
flutter·华为·harmonyos
●VON2 小时前
Flutter for OpenHarmony 21天训练营 Day01 总结:从零搭建开发环境
flutter·环境配置·openharmony·训练营·跨平台开发·von
●VON2 小时前
0基础也能行!「Flutter 跨平台开发训练营」1月19日正式启动!
学习·flutter·von·openjiuwen
小风呼呼吹儿4 小时前
Flutter 框架跨平台鸿蒙开发 - 家庭用药清单:智能管理家庭药品
flutter·华为·harmonyos
kirk_wang5 小时前
Flutter艺术探索-GetX框架使用指南:轻量级状态管理
flutter·移动开发·flutter教程·移动开发教程
雨季6665 小时前
使用 Flutter for OpenHarmony 构建基础 UI 组件布局:从 Scaffold 到 Container 的实战解析
flutter·ui
时光慢煮6 小时前
基于 Flutter × OpenHarmony 的文件管家 —— 构建文件类型分类区域
flutter·华为·开源·openharmony
时光慢煮6 小时前
跨端文件管理:Flutter 与 OpenHarmony 搜索栏实战
flutter·华为·开源·openharmony
djarmy7 小时前
跨平台Flutter 开源鸿蒙开发指南(三):使用thirdParty的dio库实现网络请求 示例
flutter·华为·harmonyos
Miguo94well7 小时前
Flutter框架跨平台鸿蒙开发——护眼提醒APP的开发流程
flutter·华为·harmonyos·鸿蒙