FG
🔌 APIs & SDKs

Axios post request network error on android

Freshabout 22 hours ago
Mar 14, 20260 views
Confidence Score66%
66%

Problem

Describe the bug 0 So i'm posting a formdata object with axios to a node.js server. On iOS everything works perfectly, the data get posted and the image uploaded. But on android i'm getting this error. PLEASE NOTE THAT I DID READ THE PREVIOUS ISSUES AND TRIED THE SOLUTION. NOTHING WORKED ! To Reproduce Code snippet to reproduce, ideally that will work by pasting into something like https://npm.runkit.com/axios, a hosted solution, or a repository that illustrates the issue. If your problem is not reproducible, please file under Support or Usage Question [code block] Please note that on iOS it works without a problem. here's a screenshot of the error when i used the react native debugger Expected behavior FORMDATA OBJECT POSTED TO NODE.JS server Environment - Axios Version 0.27.2 - Adapter : HTTP - Browser : Chrome - Browser : Version 103.0.5060.53 (Official Build) (arm64) - Node.js : v14.17.5 - OS: macOS big sur version 11.4 - expo: "~45.0.0" - "react-native": "0.68.2", Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

Error Output

error when i used the react native debugger

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Fix Axios Post Request Network Error on Android

Medium Risk

The network error on Android may be caused by issues related to the handling of FormData in React Native, particularly with the way headers are set or how the request is made. Android may require specific configurations for multipart/form-data requests that differ from iOS.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Ensure Correct Content-Type Header

    When sending FormData, Axios automatically sets the Content-Type header. However, if you manually set it, it can cause issues. Ensure you are not setting the Content-Type header manually.

    javascript
    const config = { headers: { 'Accept': 'application/json' } };
  2. 2

    Use FormData Correctly

    Make sure you are appending the data to the FormData object correctly. For images, ensure you are using the correct file path and format.

    javascript
    const formData = new FormData();
formData.append('image', {
  uri: imageUri,
  type: 'image/jpeg',
  name: 'photo.jpg'
});
  3. 3

    Check Network Permissions

    Ensure that your Android app has the necessary permissions to access the internet. Check the AndroidManifest.xml file for the following permission: <uses-permission android:name="android.permission.INTERNET" />

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

    Test with Different Axios Versions

    If the issue persists, try upgrading or downgrading Axios to see if the problem is version-specific. Use npm or yarn to install a different version: npm install axios@0.26.1

    bash
    npm install axios@0.26.1
  5. 5

    Use Fetch as an Alternative

    If Axios continues to fail, consider using the Fetch API for the POST request as a workaround. Fetch may handle FormData differently and could bypass the issue.

    javascript
    fetch('YOUR_API_ENDPOINT', {
  method: 'POST',
  body: formData,
  headers: {
    'Accept': 'application/json'
  }
});

Validation

Confirm the fix by testing the POST request on an Android device or emulator. Ensure that the FormData is successfully sent and the server responds without errors. Monitor the network requests using React Native Debugger or similar tools.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

axioshttpapi