React Native中Fetch/Axios均报Network request failed的原因咨询

Hey there, let's dig into the actual root causes behind this frustrating error you're facing—since you've already ruled out code issues (your fetch/Axios code looks solid) and checked docs/community threads, let's focus on the environmental and platform-specific culprits that usually trigger this:

• iOS App Transport Security (ATS) Blocking Connections
  Apple's ATS is strict by default. Even if you're using HTTPS, it'll block requests if the server uses outdated TLS versions (pre-TLS 1.2) or has an invalid/self-signed SSL certificate. ATS doesn't just block HTTP—it enforces secure HTTPS standards that some older or misconfigured servers fail to meet.

• Android Network Security Policies
  On Android (API 28+), cleartext HTTP requests are blocked automatically. But even HTTPS can fail if the server's certificate isn't trusted by the Android system. If you're using a self-signed cert or a cert from a non-standard CA, Android will reject the connection unless you explicitly whitelist it in your app's network security config.

• Emulator/Simulator Network Isolation
  Sometimes your emulator/simulator can't reach the internet because of your host machine's settings. Corporate firewalls, proxy configurations, or even VPNs on your computer can prevent the emulator from routing traffic properly. Also, some emulators have issues with DNS resolution, making them unable to resolve the API domain.

• React Native Network Module Conflicts
  Rarely, this can happen if you've got conflicting third-party libraries that modify network behavior, or if you upgraded React Native without properly linking network-related dependencies. The underlying native modules (like the one handling fetch) might be corrupted or misconfigured.

• Physical Device Network Restrictions
  If you're testing on a real device, check for battery saving modes that might be throttling network requests, or if the device has a weak/spotty internet connection. Some mobile carriers also have restrictions on certain types of HTTP requests.

Just to confirm, your code is totally fine—here's the snippet you shared, which doesn't have any syntax or logical issues:

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then((res) => res.json())
    .then((data) => { alert(data) })
    .catch((err) => console.log(err))
}, []);

To pinpoint exactly which cause is hitting you, try these quick diagnostics:

• Test the API URL in your browser or a local HTTP client—if it works there, the problem is definitely in your React Native setup.
• For iOS: Temporarily add an ATS exception in your Info.plist for the domain (this is just for testing, not a permanent fix) to see if the request goes through. If it does, ATS was the blocker.
• For Android: Check your AndroidManifest.xml for android:usesCleartextTraffic settings, and your network security config to ensure certificates are trusted.
• Try testing on both an emulator and a physical device to see if the issue is environment-specific.

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