Flutter新手使用http包遇ClientSocketException连接失败求助

针对你点击"Envoyer"按钮后出现的ClientSocketException连接失败错误，按以下步骤排查解决：

1. 确认后端服务正常运行 #

• 直接用浏览器或Postman访问目标接口：http://192.168.1.67:8080/api/v1/qrCode?email=test%40example.com，检查是否能正常返回响应。
• 确认后端服务确实在8080端口监听，没有被其他程序占用。

2. 确保设备与后端在同一局域网 #

• Flutter运行的设备（真机/模拟器）必须和后端服务器处于同一个WiFi网络下。
• 如果你用的是Android模拟器，不能直接使用电脑的局域网IP（192.168.1.67），需要替换为10.0.2.2（Android模拟器内置的本机映射地址）；iOS模拟器可以直接使用局域网IP。

3. 添加平台网络权限 #

Android #

在android/app/src/main/AndroidManifest.xml中添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

iOS #

在ios/Runner/Info.plist中添加HTTP请求允许配置（开发阶段使用，正式环境建议改用HTTPS）：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

4. 修正URL编码逻辑 #

你手动替换@为%40的操作多余且可能引发编码错误，Uri类会自动处理参数编码。修改QRCodeController的代码：

import 'package:http/http.dart' as http;

class QRCodeController {
  Future<String> getQRCode(String email) async {
    try {
      final uri = Uri(
        scheme: 'http',
        host: '192.168.1.67',
        port: 8080,
        path: '/api/v1/qrCode',
        queryParameters: {'email': email}, // 自动编码参数
      );
      print('请求URL: $uri'); // 打印URL确认正确性
      http.Response response = await http.get(uri);
      if (response.statusCode == 200) {
        return response.body;
      } else {
        print('请求失败，状态码: ${response.statusCode}');
        return "";
      }
    } catch (e) {
      print('连接异常详情: $e');
      return "";
    }
  }
}

同时删除layoutLogin.dart中的这行代码：

email = email.replaceAll('@', '%40');

5. 检查防火墙拦截 #

关闭后端服务器的防火墙，或者在防火墙上添加允许8080端口入站连接的规则，避免请求被拦截。

内容的提问来源于stack exchange，提问作者Mr_mido