React Native调用FastAPI后端获取Travel Advisor数据失败求助

以下是针对问题的具体排查与修复步骤：

1. 修正后端服务监听地址 #

FastAPI默认仅绑定127.0.0.1（本地回环地址），模拟器无法通过10.0.2.2访问该地址。启动后端时需指定监听所有网卡：

uvicorn main:app --host 0.0.0.0 --port 8000

此配置让服务监听开发机的所有网络接口，确保模拟器的10.0.2.2能正确映射到后端服务。

2. 验证网络连通性 #

• 在模拟器内置浏览器中访问http://10.0.2.2:8000/docs，若能打开FastAPI自动文档页面，说明网络连通正常；若无法打开：
  • 检查开发机防火墙是否开放8000端口：
    • Windows：添加8000端口的入站规则
    • Linux/Mac：执行sudo ufw allow 8000（Ubuntu）或对应防火墙开放命令

3. 修复前端请求参数错误 #

前端代码中type参数为硬编码的someType，需替换为实际状态值：

const url = `${BackendUrl}/?type=${type}&latitude=${latitude}&longitude=${longitude}`;

同时确保type状态已通过MenuContainer的setType正确更新，避免传递空值或无效值导致后端报错。

4. 解决Android明文HTTP限制 #

Android 9及以上默认禁止非HTTPS明文请求，需配置网络安全策略允许访问10.0.2.2：

1. 在android/app/src/main/res/xml目录下创建network_security_config.xml：

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

2. 在android/app/src/main/AndroidManifest.xml的<application>标签中添加配置：

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

5. 检查端口占用情况 #

确认8000端口未被其他程序占用：

• Windows：执行netstat -ano | findstr :8000，查看PID后结束对应进程
• Linux/Mac：执行lsof -i :8000，终止占用端口的程序

完成以上步骤后，重启后端与React Native应用，测试请求是否正常。

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