React Native使用Axios调用API出现[AxiosError: Network Error]问题求助

我是React Native新手，尝试使用Axios提交API请求时遇到[AxiosError: Network Error]错误，不清楚该错误的原因及解决方法。相关代码如下：

function getdata() {
 
    const Data = {
      babyname: babyname,
      password: name,
      email: email,
      phone: nuber,

      period: mydate,
    };

    console.log(Data);
  
    axios({
      method: 'POST',
      url: 'http://127.0.0.1:8000/api/details/',
      data: Data,
    })
      .then(function (response) {
        console.log(response.data);
      
      })
      .catch(function (error) {
        console.log(error);
      });

}

我已使用React Native默认检查工具并打开了网络标签，相关截图如下：

常见原因及解决办法 #

• 本地回环地址无法访问：你当前使用的http://127.0.0.1:8000是电脑本地回环地址，真机或模拟器无法通过这个地址访问电脑上的后端服务。

  • 解决：替换为电脑在局域网内的实际IP地址（可通过ipconfig/ifconfig查询），比如http://192.168.1.100:8000，同时确保设备和电脑在同一WiFi网络下。

• 跨域资源共享(CORS)限制：后端服务未配置CORS，导致请求被React Native网络层拦截。

  • 解决：在后端服务中添加CORS中间件，允许客户端请求来源。例如Django项目用django-cors-headers，Flask项目用flask-cors。

• 网络权限未开启：React Native项目未配置必要的网络访问权限。

  • 解决：
    • Android：在android/app/src/main/AndroidManifest.xml中添加权限声明：

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

    • iOS：若使用HTTP协议，在ios/项目名/Info.plist中添加ATS配置允许非HTTPS请求：

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

• Axios请求配置不完整：缺少必要的请求头或数据序列化设置。

  • 解决：显式设置Content-Type为application/json，确保数据正确序列化：

    axios({
      method: 'POST',
      url: 'http://你的局域网IP:8000/api/details/',
      data: Data,
      headers: { 'Content-Type': 'application/json' }
    })
    

• 后端服务未正常运行：先验证后端服务可用性，用Postman或浏览器直接访问http://127.0.0.1:8000/api/details/，确认能正常响应。

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