Flutter实践中移动端HTTP请求连接被拒问题求助

核心原因 #

Web端运行时，localhost指向运行浏览器的开发电脑；但移动端（iOS/Android）的localhost指向设备自身，后端服务并未在移动设备上运行，因此出现连接被拒的情况。

解决方案 #

1. 替换localhost为开发电脑的局域网IP #

• 查看开发电脑的局域网IP：Windows使用ipconfig命令，Mac/Linux使用ifconfig或ip addr命令
• 修改代码中的请求地址，将http://localhost:3000/api/v1/auth替换为http://你的局域网IP:3000/api/v1/auth，示例：

Uri.parse('http://192.168.1.100:3000/api/v1/auth')

2. Android端额外配置 #

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

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

• Android 9及以上默认禁止明文HTTP请求，需在android/app/src/main/res/xml目录下创建network_security_config.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

然后在AndroidManifest.xml的application标签中引用该配置：

<application
    ...
    android:networkSecurityConfig="@xml/network_security_config">

3. iOS端额外配置 #

• 在ios/Runner/Info.plist中添加允许HTTP请求的配置：

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

验证要点 #

• 确保移动设备和开发电脑处于同一局域网
• 确认后端服务的防火墙允许局域网设备访问3000端口

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