React Native Android端Fetch请求失效求助（新手开发者）

Hey there! I totally get how frustrating it is when your code works smoothly on iOS but hits a wall on Android—let’s walk through the most common fixes for your Fetch issue, since this is a super common gotcha for new React Native devs.

1. Android’s Cleartext Traffic Block (Most Likely Culprit) #

Starting from Android 9 (API level 28), Google blocks plain HTTP (non-HTTPS) requests by default. If your backend uses HTTP instead of HTTPS, that’s almost certainly why your request works on iOS but fails on Android.

Fix: #

Open your android/app/src/main/AndroidManifest.xml file, and add the android:usesCleartextTraffic="true" attribute to the <application> tag:

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

2. Tweak Headers for Android’s Strict Handling #

While your header setup looks correct, Android can sometimes be pickier about formatting. Try these small adjustments:

• Double-check for extra spaces in header keys/values (yours look good, but it never hurts to verify!)
• Add a User-Agent header—some servers block requests that don’t mimic a browser:

  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'User-Agent': 'React Native Registration App'
  }
  

3. Handle Self-Signed/Invalid HTTPS Certificates #

If your backend uses HTTPS but has a self-signed or untrusted certificate, Android will reject the request outright. To fix this during development:

1. Create a file android/app/src/main/res/xml/network_security_config.xml with this content:

   <?xml version="1.0" encoding="utf-8"?>
   <network-security-config>
     <domain-config cleartextTrafficPermitted="true">
       <domain includeSubdomains="true">your-backend-domain.com</domain>
     </domain-config>
   </network-security-config>
   

2. Link this config in your AndroidManifest.xml:

   <application
     ...
     android:networkSecurityConfig="@xml/network_security_config"
     ...>
   

4. Debug the Actual Error (Critical!) #

Right now, your catch block only shows a generic alert—you need to see the real error message to pinpoint the issue. Update your code to log the full error details:

const json = JSON.stringify(payload);
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json'
  },
  body: json
})
.then((response) => {
  // First, check if the response is successful (status 200-299)
  if (!response.ok) {
    throw new Error(`Server error! Status: ${response.status}`);
  }
  return response.json();
})
.then((data) => {
  console.log('Success! Server response:', data);
  this.props.navigation.navigate('Home');
})
.catch((error) => {
  console.error('Fetch failed:', error); // This will show the real issue in your debug console
  alert(`Une erreur s'est produite lors de la création de votre compte: ${error.message}`);
})
// Note: .done() is not a standard Fetch API method—remove it, it might cause unexpected issues

Quick Testing Tip #

Use the React Native Debugger to inspect network requests. It’ll show you exactly what’s being sent, what response (if any) you’re getting, and any error codes—this is a game-changer for debugging platform-specific issues.

Start with the cleartext traffic fix first—it’s the most common issue for new React Native devs. If that doesn’t work, check the debug logs to see if it’s a server error, certificate problem, or something else.

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