React Native Android中Axios.get请求出现Network Error问题求助

• 检查平台网络权限配置

  • Android：确保AndroidManifest.xml（路径：android/app/src/main/AndroidManifest.xml）中添加了网络权限：

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

    若使用Android 9（API 28）及以上版本，HTTPS请求一般无需额外配置，但如果项目有自定义网络安全规则，可检查network_security_config.xml是否限制了外部请求。

  • iOS：打开Info.plist（路径：ios/[你的项目名]/Info.plist），添加App Transport Security配置以允许访问目标域名：

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSExceptionDomains</key>
      <dict>
        <key>reactnative.dev</key>
        <dict>
          <key>NSIncludesSubdomains</key>
          <true/>
          <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
          <false/> <!-- 目标为HTTPS，设为false即可 -->
        </dict>
      </dict>
    </dict>
    

    若需临时测试（不建议生产环境使用），可允许所有域名：

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

• 排除网络环境问题
  在模拟器/真机的浏览器中直接打开https://www.reactnative.dev/movies.json，确认是否能正常加载JSON内容。如果无法打开，优先检查设备的WiFi/蜂窝网络连接；如果能正常加载，再排查代码或配置问题。

• 用Fetch测试请求有效性
  替换现有getData函数为Fetch请求，验证是否能成功获取数据，以此排除Axios本身的问题：

  const getData = async () => {
    try {
      const response = await fetch('https://www.reactnative.dev/movies.json');
      const json = await response.json();
      setData(json.movies);
    } catch (error) {
      console.warn(error);
    }
  };
  

  若Fetch请求成功，可尝试更新Axios版本，或检查是否存在全局Axios拦截器干扰请求。

• 优化代码写法
  你的代码同时混用了await和.then()，虽然语法合法但易造成逻辑混乱，建议统一使用Async/Await写法：

  const getData = async () => {
    try {
      const { data } = await axios.get('https://www.reactnative.dev/movies.json');
      setData(data.movies);
    } catch (error) {
      console.warn(error);
    }
  };
  

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