In-depth Analysis and Solutions for fetch() Network Request Failed in React Native

Problem Background and Phenomenon Analysis

During React Native development, developers frequently encounter Network Request Failed errors when using the fetch() API. This phenomenon is particularly common in newly created React Native projects, especially when attempting to access resources over HTTP protocol. From a technical perspective, this primarily stems from the strict security requirements of modern mobile operating systems.

iOS Platform Security Mechanism Analysis

Starting from iOS 9.0, the system introduced the App Transport Security (ATS) mechanism, which by default requires all network connections to use HTTPS protocol. When an application attempts to establish an HTTP connection, the system actively intercepts and rejects the request, causing the fetch() call to fail.

To address this limitation, developers need to make corresponding configurations in the project's info.plist file. The most basic solution is to globally allow arbitrary HTTP loads:

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

Android Platform Security Policies

Starting from API level 28 (Android 9), the Android platform similarly strengthened restrictions on cleartext traffic. The system by default prevents applications from communicating over HTTP protocol, which directly affects the fetch() functionality in React Native.

Solving this issue on the Android platform requires explicitly enabling cleartext traffic in AndroidManifest.xml:

<application
  android:usesCleartextTraffic="true"
  .......>
  .......
</application>

Security Best Practices

While globally disabling security restrictions can quickly solve the problem, from a security perspective, using domain exceptions is more recommended. This method only relaxes security requirements for specific domains, addressing development needs while maintaining the overall security of the application.

Here is an example of ATS configuration for specific domains:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

Development Environment Special Considerations

During the development phase, developers often need to connect to local servers. It's important to note that in Android emulators, the address of the local development machine is 10.0.2.2, while in Genymotion emulators it's 10.0.3.2. Using localhost typically doesn't work properly, which is another common cause of network request failures.

Debugging and Error Handling

When encountering network request failures, it's recommended to adopt a systematic debugging approach. First, confirm that network permissions are correctly configured by checking if the AndroidManifest.xml contains network permission declarations:

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

Secondly, use more detailed error handling mechanisms to capture and diagnose problems:

fetch('http://facebook.github.io/react-native/movies.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then((responseJson) => {
    console.log('Data received:', responseJson.movies);
    return responseJson.movies;
  })
  .catch((error) => {
    console.error('Fetch error details:', error.message);
    console.error('Full error:', error);
  });

Platform Differences Summary

There are significant differences in network security management between iOS and Android platforms. iOS's ATS mechanism is more strict and systematic, while Android's cleartext traffic control is relatively flexible. Understanding these differences is crucial for cross-platform development, as developers need to adopt corresponding configuration strategies for different platforms.

Production Environment Recommendations

When deploying applications to production environments, it's strongly recommended to use HTTPS protocol and remove all HTTP-related exception configurations. This not only aligns with best security practices but also avoids compatibility issues caused by security policy changes. For scenarios where HTTP must be used, detailed security risk assessments should be documented and alternative solutions like network security configuration should be considered.