本地API连接手机设备异常：运行无显示且报Connection refused错误

I/flutter (18296): Error: ClientException with SocketException: Connection refused (OS Error: Connection refused, errno = 111), address = localhost, port = 44450, uri=http://localhost/api_projek/coba_api.php

问题核心：代码中使用的localhost在手机设备上指向的是设备自身，而非运行API的开发电脑，因此导致连接被拒绝。以下是具体解决方案：

• 替换localhost为电脑的本地IP地址

  • 查看电脑的本地局域网IP：
    • Windows：打开命令提示符，执行ipconfig，找到「无线局域网适配器 WLAN」下的「IPv4地址」
    • Mac/Linux：打开终端，执行ifconfig或ip addr，找到Wi-Fi接口下的inet地址
  • 修改代码中的URL，例如将http://localhost/api_projek/coba_api.php替换为http://192.168.x.x/api_projek/coba_api.php（替换为你实际的电脑IP）

• 确保设备与电脑在同一网络

  • 手机（或模拟器）和开发电脑必须连接到同一个Wi-Fi网络，否则无法通过局域网IP访问电脑上的API

• 配置本地服务器允许外部访问

  • 检查你的API服务器（如Apache、Nginx）是否监听0.0.0.0而非仅127.0.0.1，确保允许局域网内其他设备访问
  • 关闭电脑防火墙或添加规则，允许服务器端口的入站连接（默认HTTP端口是80，若你的API用了其他端口需对应开放）

• Android模拟器的特殊处理

  • 如果你使用Android模拟器，可以直接用10.0.2.2代替localhost，这个地址是模拟器专门用来映射到开发电脑localhost的别名，代码示例：

    var response = await http.get(Uri.parse('http://10.0.2.2/api_projek/coba_api.php'));
    

• 添加错误处理解决无显示问题

  • 原代码未处理请求失败的情况，导致异常抛出后UI无法正常渲染。添加try-catch捕获异常并给出提示：

    try {
      var response = await http.get(Uri.parse('http://你的电脑IP/api_projek/coba_api.php'));
      if (response.statusCode == 200) {
        // 处理返回的数据并更新UI
      } else {
        // 处理HTTP错误状态码
      }
    } catch (e) {
      print('API请求失败: $e');
      // 在这里更新UI显示错误信息，比如提示"连接服务器失败"
    }
    

• 先测试API连通性

  • 在手机浏览器中直接访问修改后的API URL，确认能正常返回数据。如果浏览器也无法访问，说明问题出在服务器配置或网络连接，而非Flutter代码

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