Android端使用Fetch调用Cloud Functions上传图片时网络请求失败

Hey there, let’s break down why your Android fetch request is failing while iOS works perfectly when using Cloud Functions as a middleware for Firebase Storage uploads. I’ve debugged this exact scenario multiple times, so here are the most actionable fixes to try right away:

1. Fix Multipart/Form-Data Headers on Android #

Android’s Fetch API (especially in React Native or native implementations) often doesn’t auto-generate the correct Content-Type header with a boundary for multipart requests—something iOS handles seamlessly. This mismatch causes your Cloud Function to fail parsing the request body.

• How to fix:
  When creating your FormData instance, explicitly extract its boundary and set it in the request headers:

  const formData = new FormData();
  formData.append('image', imageFile);
  
  // Get the auto-generated boundary (varies by runtime, adjust if needed)
  const boundary = formData._boundary;
  
  const response = await fetch('YOUR_CLOUD_FUNCTION_URL', {
    method: 'POST',
    headers: {
      'Content-Type': `multipart/form-data; boundary=${boundary}`,
      // Add any auth headers here (like Firebase ID token)
    },
    body: formData
  });
  

  Never hardcode the boundary—always pull it directly from the FormData instance to ensure it matches what’s in the request body.

2. Allow Cleartext Traffic (For Test Environments Only) #

Android 9 (API level 28+) blocks cleartext HTTP requests by default. If you’re testing your Cloud Function over HTTP (not HTTPS), this will cause silent failures.

• Temporary fix for testing:
  Add android:usesCleartextTraffic="true" to your AndroidManifest.xml under the <application> tag:

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:usesCleartextTraffic="true"
    ...>
  </application>
  

  Important: Remove this for production and use HTTPS exclusively—cleartext traffic is a security risk.

3. Enforce Proper CORS Configuration in Your Cloud Function #

Android’s Fetch is stricter about CORS preflight checks than iOS. If your Cloud Function doesn’t return the right CORS headers, Android will block the request before it even reaches your upload logic.

• Update your Cloud Function:
  Make sure to handle OPTIONS requests (preflight) and set the required headers:

  exports.uploadImage = functions.https.onRequest(async (req, res) => {
    // Handle CORS preflight
    if (req.method === 'OPTIONS') {
      res.set('Access-Control-Allow-Origin', '*'); // Restrict to your app's domain in production
      res.set('Access-Control-Allow-Methods', 'POST, OPTIONS');
      res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
      return res.status(204).send('');
    }
  
    // Set CORS for main request
    res.set('Access-Control-Allow-Origin', '*');
  
    // Rest of your upload logic here...
  });
  

  Without handling OPTIONS, Android’s preflight request will fail, leading to the "network request failed" error.

4. Dig Into Android’s Detailed Error Logs #

"Network request failed" is too vague—you need to see the actual error to pinpoint the issue.

• For React Native:
  Add detailed error logging in your catch block:

  try {
    const response = await fetch(...);
  } catch (error) {
    console.error('Full error:', error);
    console.error('Error message:', error.message);
    console.error('Response details:', error.response);
  }
  

• For Native Android:
  Use OkHttp’s interceptor to log the full request and response:

  val loggingInterceptor = HttpLoggingInterceptor().apply {
    level = HttpLoggingInterceptor.Level.BODY
  }
  val client = OkHttpClient.Builder()
    .addInterceptor(loggingInterceptor)
    .build()
  

  Look for clues like SSL handshake failures, CORS errors, or truncated request bodies.

5. Check Request Body Size Limits #

Android’s network libraries (like OkHttp) have default limits on request body size. If your image is large, it might get truncated before reaching the Cloud Function.

• How to verify:
  In your Cloud Function, log the size of the incoming request body:

  console.log('Request body size:', req.headers['content-length']);
  

  Compare this to the actual size of the image you’re uploading. If they don’t match, adjust your Android client to allow larger payloads.

• Fix for native Android:
  Configure OkHttp to handle large requests:

  val client = OkHttpClient.Builder()
    .writeTimeout(5, TimeUnit.MINUTES)
    .callTimeout(5, TimeUnit.MINUTES)
    .build()
  

Start with checking CORS and multipart headers—those are the most common culprits here. Once you get detailed error logs, you’ll have a much clearer path to fixing the issue.

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