Flutter API调用遇Connection refused错误，无法获取数据

问题详情 #

调用本地API时出现连接被拒绝异常：

_ClientSocketException (Connection refused)

使用的Flutter代码如下：

import 'package:apicalls/models/posts.dart';
import 'package:http/http.dart' as http;

class RemoteService {
  Future<List?> getBoxes() async {
    var client = http.Client();

    var uri = Uri.parse('http://127.0.0.1:3000/api/boxes');

    var response = await client.get(uri);

    var json = response.body;

    return boxesFromJson(json);

    // return postsFromJson(json);
  }
}

预期从http://127.0.0.1:3000/api/boxes获取数据，但请求失败。

排查与解决步骤 #

1. 验证后端服务状态
   先在浏览器或Postman中访问http://127.0.0.1:3000/api/boxes，确认后端服务是否正常启动且能返回数据。如果浏览器也无法访问，优先检查后端服务是否运行、端口是否为3000。

2. 适配模拟器/真机的本地地址

   • Android模拟器：127.0.0.1指向模拟器自身，需替换为主机映射地址http://10.0.2.2:3000/api/boxes。
   • iOS模拟器：可直接用127.0.0.1，若失败则尝试电脑的局域网IP（如http://192.168.x.x:3000/api/boxes）。
   • 真机测试：必须使用电脑的局域网IP，且确保手机和电脑在同一网络下。

3. 检查防火墙与端口权限
   电脑防火墙可能拦截Flutter应用对3000端口的访问，临时关闭防火墙测试，或在防火墙规则中允许3000端口的入站/出站请求。

4. 确认API路由正确性
   检查后端的API路径是否为/api/boxes，注意路径的大小写、层级是否匹配，避免因路由不存在导致连接失败。

5. 优化代码的异常处理
   给请求添加异常捕获和状态码判断，便于定位问题并避免崩溃：

   Future<List?> getBoxes() async {
     var client = http.Client();
     try {
       // 根据运行环境替换正确的地址
       var uri = Uri.parse('http://10.0.2.2:3000/api/boxes');
       var response = await client.get(uri);
       
       if (response.statusCode == 200) {
         return boxesFromJson(response.body);
       } else {
         print('请求失败，状态码：${response.statusCode}');
         return null;
       }
     } catch (e) {
       print('请求异常：$e');
       return null;
     } finally {
       client.close(); // 确保释放客户端资源
     }
   }
   

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