Expo应用无法向本地Flask服务器发起请求问题求助

可能的原因及修复步骤 #

1. Android 9+ 明文HTTP访问限制 #

Android 9（API级别28）及以上系统默认禁止应用发起明文HTTP请求，手机浏览器通常不受此限制，但Expo应用会被拦截。需在app.json中配置允许目标IP的明文流量：

修改app.json的Android配置：

"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/images/adaptive-icon.png",
    "backgroundColor": "#ffffff"
  },
  "package": "com.teago.tvpccontrol",
  "permissions": ["INTERNET", "ACCESS_NETWORK_STATE"],
  "networkSecurityConfig": {
    "domainConfigs": [
      {
        "domain": "192.168.1.3",
        "cleartextTrafficPermitted": true
      }
    ]
  }
}

修改后重启Expo开发服务，重新加载应用。

2. 捕获详细错误信息定位问题 #

当前代码仅打印简单错误提示，无法明确是超时、CORS还是请求格式错误。修改Expo代码中的catch块，输出完整错误详情：

// 以handlePlayPause为例，其他请求的catch块同理修改
catch (error: any) {
  console.error('请求失败详情:', error.message);
  if (error.response) {
    console.error('响应状态码:', error.response.status);
    console.error('响应内容:', error.response.data);
  } else if (error.request) {
    console.error('无响应返回（可能是连接超时）:', error.request);
  } else {
    console.error('请求配置错误:', error.config);
  }
}

通过日志可直接定位问题类型，比如CORS错误、连接超时或服务器端报错。

3. 优化Flask的CORS配置 #

虽然已配置跨域规则，但部分场景下可能存在OPTIONS请求未被正确处理的情况。简化CORS配置，确保所有跨域请求都被允许：

修改Flask代码：

# 替换原来的CORS配置行
CORS(app)

4. 验证防火墙和端口权限 #

尽管手机浏览器能访问，但部分杀毒软件或防火墙可能对非浏览器应用的端口访问做了限制。临时关闭电脑防火墙，测试Expo应用是否能正常请求，若恢复正常则需在防火墙上添加5000端口的允许规则。

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