React Native fetch()异常：本地正常，对接业务模块抛‘Network Request Failed’

Hey there! Let's figure out why your fetch() call in React Native is throwing that frustrating 'Network Request Failed' error when targeting your business module, even though it works perfectly on localhost. Below are the most likely culprits and how to fix them:

• If you're testing on a physical phone: Your device needs to connect to your backend's actual local IP address (not localhost or 127.0.0.1) because physical devices don't share your computer's localhost network. Find your server's IP (e.g., 192.168.1.105 on Wi-Fi) and replace localhost with that in your fetch URL.
• For Android emulators: Use 10.0.2.2 instead of localhost to access the host machine's server (this is a special alias for the emulator's host).

• Most production/staging APIs use CORS rules to restrict which origins can send requests. If your React Native app's origin isn't allowed, the server will block the request outright.
• Quick dev fix (never use this in production): For Node.js/Express, use the cors package to temporarily allow all origins:

  const cors = require('cors');
  app.use(cors({ origin: '*' }));
  

• Production fix: Configure the API to explicitly allow your app's domain or mobile app's identifier (like your iOS bundle ID or Android package name).

• If your business API uses HTTPS (which it should), invalid or untrusted certificates will cause network failures on mobile devices.
• Dev/staging workaround:
  • iOS: Add these lines to your Info.plist to allow insecure loads (only for testing):

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

  • Android: Add android:usesCleartextTraffic="true" to the <application> tag in your AndroidManifest.xml.
• Production: Use a valid SSL certificate from a trusted authority like Let's Encrypt to ensure full device trust.

• Your business module's server might be behind a firewall that blocks incoming requests from mobile devices. Verify the server's port is open and accessible outside your local network.
• If you're on a corporate network, proxy settings could be interfering. Try testing on a personal Wi-Fi network to rule this out.

• Missing required headers (like Content-Type or authentication tokens) can cause the server to reject the request, which may show up as a generic 'network failed' error.
• Example of a properly structured request:

  fetch('https://your-business-api.com/endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_AUTH_TOKEN' // Include if required by the API
    },
    body: JSON.stringify({ data: 'your payload' })
  })
  .then(res => res.json())
  .catch(err => console.log('Request error:', err));
  

• The remote debugger can sometimes interfere with network requests. Try disabling it (press Cmd+D on iOS or Ctrl+M on Android, then uncheck "Debug JS Remotely") and test again.
• Also, restart the Metro bundler with npm start --reset-cache to clear any cached network configurations that might be causing conflicts.

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