This is the third day of my participation in the August Text Challenge.More challenges in August

Flutter uses Charles to capture packets

Problem 1.

When we are doing application development, we often need to use some tools to grab the network request interface, which can greatly facilitate interface coordination. But Charles couldn’t get hold of the interface when developing the Flutter app. What was going on?

Charles was able to capture the network interface using other client applications. Only the interface of the Flutter application could not be captured. What happened?

After a series of investigations, it was found that the network requests of the Flutter application did not go through your phone’s system proxy. That is to say, even if you set the proxy address and port number in the system Settings, Flutter will not go through your system proxy. If the system agent is not available, then we have to set up the agent dynamically in the code to solve the problem.

2. Solutions

Setting the HTTP proxy: DefaultHttpClientAdapter provides an onHttpClientCreate callback to set the proxy for the underlying HttpClient. If we want to use a proxy, we can refer to the following code

dio


  import 'dart:io'; 
  import 'package:dio/adapter.dart'; 
  import 'package:dio/dio.dart'; 
  
        floatingActionButton: new FloatingActionButton(
        onPressed: () async {
          // Add this section of code
          var dio = Dio();

          // In debug mode, packet capture is required, so we use proxy and disable HTTPS certificate verification
          (dio.httpClientAdapter as DefaultHttpClientAdapter)
              .onHttpClientCreate = (client) {
            client.findProxy = (url) {
              return 'the PROXY 172.25.84.99:8888'; // Set localhost to the IP address of your computer, otherwise unchanged
            };
            // The proxy tool will provide a self-signed certificate for capturing packets, which will fail certificate verification, so we disable certificate verification
            client.badCertificateCallback =
                (X509Certificate cert, String host, int port) => true;
          };

          final response = await dio.get(
              'http://app.gjzwfw.gov.cn/fwmhapp1/code/getverifyCode.do?number=12345678');
          print('${response.data}');
        },
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),

Copy the code

http

import 'dart:convert'; import 'dart:io'; import 'package:dio/dio.dart'; floatingActionButton: new FloatingActionButton( onPressed: () async { var httpClient = new HttpClient(); httpClient.findProxy = (url) { return HttpClient.findProxyFromEnvironment(url, environment: { "http_proxy": "Http://172.25.84.99: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(' request success '); var responseBody = await response.transform(Utf8Decoder()).join(); print('responseBody = $responseBody'); } else {print(' request failed '); } }, tooltip: 'Increment', child: new Icon(Icons.add), ),Copy the code

Now you can capture your phone’s bag in the Flutter app. Here is my record of the capture: