解决axios在React Native中的网络错误问题

问题背景

axios作为JavaScript中最流行的HTTP客户端库之一，在React Native开发中被广泛使用。然而，许多开发者在升级到Expo SDK 50或React Native 0.73版本后，遇到了"Network Error"的网络错误问题。这个问题在iOS平台上尤为常见，有时也会影响Android平台。

问题表现

开发者报告的主要症状包括：

• 在Expo SDK 50或React Native 0.73+环境中，axios请求随机失败
• 错误信息通常为"Network Error"或"GET method must not have a body"
• 在开发模式下可能工作正常，但在生产构建中失败
• 问题可能仅影响iOS平台，或同时影响iOS和Android

根本原因分析

经过开发者社区的深入探讨，发现这个问题主要由以下几个因素导致：

1. iOS平台的安全策略变更：Expo SDK 50和React Native新版本加强了iOS平台的安全限制，默认禁止不安全的HTTP连接。

2. axios的GET请求处理变化：axios新版本对GET请求的处理更加严格，不允许包含请求体(body)。

3. 内容类型(Content-Type)设置问题：特别是对于multipart/form-data类型的请求，需要显式设置正确的headers。

4. 数据null/undefined处理差异：axios新版本对null和undefined的处理方式有所改变。

解决方案

1. 处理iOS平台的安全策略

对于iOS平台，需要在Info.plist文件中添加以下配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

对于Android平台，在AndroidManifest.xml的application标签中添加：

android:usesCleartextTraffic="true"

2. 正确处理GET请求

axios新版本严格要求GET请求不能包含请求体。修改axios配置，确保GET请求的data为undefined而非null：

const instance = axios.create();

export async function fetcher(config) {
  try {
    const response = await instance({
      ...config,
      baseURL: BASE_API_URL,
      headers: {
        Accept: 'application/json',
        ...config.headers,
      },
      data: config.data || undefined, // 使用undefined而非null
    });
    return response && response.data;
  } catch (e) {
    throw e;
  }
}

3. 显式设置Content-Type

对于POST请求，特别是multipart/form-data类型，需要显式设置headers：

axios.post(url, formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});

4. 版本兼容性处理

如果上述方法无效，可以考虑以下版本调整方案：

1. 降级axios到0.19.0版本
2. 降级Expo到49版本（仅适用于Expo项目）

最佳实践建议

1. 优先使用HTTPS：现代移动平台越来越限制HTTP连接，建议所有API都使用HTTPS。

2. 统一请求处理：创建一个axios实例并统一配置，而不是在每个请求中单独配置。

3. 错误处理：实现全面的错误处理机制，捕获并记录网络错误的详细信息。

4. 测试策略：在开发和生产模式下都进行充分测试，特别是对于iOS平台的测试。

5. 版本控制：谨慎升级依赖版本，特别是大版本更新时，要进行全面测试。

总结

axios在React Native环境中的网络错误问题通常不是axios本身的问题，而是与平台安全策略、版本兼容性和配置方式相关。通过正确配置iOS/Android平台的安全策略、调整axios请求处理方式以及合理设置headers，大多数情况下可以解决这些问题。开发者应当理解这些问题的本质，而不是简单地降级依赖版本，这样才能构建出更健壮的移动应用。