React Native Expo fetch请求报错Network request failed技术求助

Hey Lukas, sorry to hear you're hitting this frustrating network error on Android—especially since it works fine in the browser! Let's walk through the most common fixes for this issue:

1. Double-Check Internet Permission #

First, make sure your Android app has permission to access the internet. Open android/app/src/main/AndroidManifest.xml and verify this line exists above the <application> tag:

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

If it's missing, add it and rebuild your app.

2. Fix HTTPS Certificate Trust Issues #

Android has stricter rules for trusting HTTPS certificates than browsers. If your server uses a self-signed certificate or one from a non-public CA, React Native will reject the request. Here's how to fix this:

Option A: Trust the Specific Certificate (Recommended for Production) #

1. Place your server's certificate file (e.g., my_cert.pem) in android/app/src/main/res/raw/ (create the raw folder if it doesn't exist).
2. Create a network_security_config.xml file in android/app/src/main/res/xml/ with this content:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="false">
        <domain includeSubdomains="true">xxx.xx</domain> <!-- Replace with your server domain -->
        <trust-anchors>
            <certificates src="@raw/my_cert" /> <!-- Match your certificate filename -->
        </trust-anchors>
    </domain-config>
</network-security-config>

3. Update your AndroidManifest.xml to use this config by adding to the <application> tag:

android:networkSecurityConfig="@xml/network_security_config"

Option B: Allow Unsafe HTTPS (Debug Only!) #

For development testing, you can temporarily allow Android to trust unrecognized certificates. Add this to the <application> tag in AndroidManifest.xml:

android:usesCleartextTraffic="true"
android:networkSecurityConfig="@xml/network_security_config"

Then update your network_security_config.xml to:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">xxx.xx</domain>
        <trust-anchors>
            <certificates src="user" /> <!-- Trusts user-installed certificates -->
        </trust-anchors>
    </domain-config>
</network-security-config>

Never use this in production—it exposes your app to security risks.

3. Try an Alternative to Fetch #

Sometimes the React Native implementation of fetch can have quirks. Try using the axios library instead to rule out fetch-specific issues:

1. Install axios:

npm install axios

2. Replace your fetch code with this:

import axios from 'axios';

// ... your component code ...

axios.post('https://xxx.xx/login.php', {
  email: email,
  password: password
}, {
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json"
  }
})
.then((response) => {
  const responseJson = response.data;
  if(responseJson === 'Data Matched'){
    this.props.navigation.navigate('Second', { Email: email});
  }else{
    Alert.alert(responseJson);
  }
})
.catch((error) => {
  console.error(error);
});

4. Verify Network Access from Android #

If none of the above work, confirm your Android device/emulator can actually reach the server:

• For emulators: Ensure it's connected to the internet (check the status bar for a network icon).
• For physical devices: Test accessing https://xxx.xx/login.php in the device's browser to confirm connectivity.

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