使用React Native和Axios调用本地API无法获取数据如何解决

1. 优先修复本地地址配置问题 #

localhost对你的RN运行设备（模拟器/真机）来说指向的是设备自身，而非电脑上运行的本地服务，需要按运行环境替换http.common中baseURL的地址：

• 安卓模拟器：替换为10.0.2.2，即http://10.0.2.2:19002/api
• iOS模拟器：替换为电脑的局域网IP（比如http://192.168.3.12:19002/api）
• 真机调试：确保手机和电脑在同一WiFi下，同样使用电脑的局域网IP

2. 移除前端无效CORS配置 #

Access-Control-Allow-Origin等CORS相关头是服务端需要返回的响应头，前端请求头里配置这些完全无效，反而可能触发服务端跨域校验失败，直接把http.common里这三行配置删掉：

"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods": "GET,PUT,POST,PATCH,DELETE",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"

同时去你的本地服务端配置CORS跨域许可，允许RN端的IP访问接口。

3. 处理明文HTTP请求限制 #

安卓9+、iOS12+默认禁止非HTTPS的明文请求，你当前用的是http协议，需要单独配置权限：

• 安卓：在android/app/src/main/AndroidManifest.xml的application标签中添加属性：
  android:usesCleartextTraffic="true"
• iOS：在ios/[项目名]/Info.plist中添加如下配置，允许任意HTTP请求：

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

4. 代码逻辑优化&调试 #

• 你当前的空判断逻辑完全无效：items初始值是空数组[]，!items永远为false，不会触发return null的逻辑，需要的话可以新增loading状态处理加载中场景
• then回调里的async关键字没有对应await逻辑，属于冗余代码可以删掉
• 先查看控制台catch打印的错误信息：如果是Network Error基本是上面的地址/HTTP权限问题，如果是404检查接口路径、端口是否正确，如果是500检查服务端逻辑
• 可以使用抓包工具（Charles/Fiddler）查看实际发出的请求地址、请求参数、服务端返回内容，快速定位问题

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