How to fix React Native POST Form Data: Network Error

Table of contents

Fix React Native POST Form Data: “Network Request Failed”

I have a post function which I use for sending POST request with form data to my API. I had tested on iOS, it was working great, until I tried on Android.

I was getting “Network Request Failed” for my POST form data request in React Native. I was unable to send form data via POST due to this network error. When I check the network tab, I don’t event see a request. When I tried to log, I don’t see any error details.

The important cue for me was that, on Android GET requests were working fine, but not the POST request. So I understood that it should have been something wrong with how I make the post request.

Then after a quick search I saw this comment from “thachxyz123” on reddit:

And I realized my first problem;

1. HTTPS is a must on Android requests

I was using a local API url without SSL/HTTPS:

http://localhost:3000/api/v1

which is not https. I replaced it with https url.

According to the comment I shared above, and to this page on Google Developers page, it’s clear that HTTPS is required for network requests on Android:

Starting with Android 9 (API level 28), cleartext support is disabled by default.

(Source: Google Developers Page)

But then, still I was getting “Network request failed” when I tried to POST a form data.

Then I realized the second issue:

2. Include the correct Content-Type in your request headers

To make the POST request with form data, I was using x-www-form-urlencoded as the content type:

headers: { "Content-Type": "application/x-www-form-urlencoded" },

instead of regular multipart/form-data:

headers: { "Content-Type": "multipart/form-data" },

The first one was the suggestion of GitHub Copilot. When I was writing this function, Copilot suggested this type, and since it was supposed to be a temporary function and seemed to be working for iOS, I didn’t thnk on it too much. But turns out it was not the suitable type.

After this, finally my POST request with form data worked on both Android and iOS!

TLDR; How to fix POST with form data not working on React Native Android (or iOS)?

1. Make sure you are using a HTTPS url, not HTTP.

   -- fetch("http://localhost:3000/api/")
   ++ fetch("https://localhost:3000/api/")

2. Include the correct Content-Type in your POST request’s headers: multipart/form-data

   --    headers: { "Content-Type": "application/x-www-form-urlencoded" },
   ++    headers: { "Content-Type": "multipart/form-data" },

3. Make sure there is no CORS related issues in your POST request. It is not covered in this post, but it is one of the most common issues when trying to use an API url, which lives in a different origin/domain than your app.

Although most people seems to be using axios had this problem before, I had this using native fetch function.

The solutions above should apply to both fetch and axios (or other methods) for making POST requests with form data.

Final version of working POST Form Data with fetch

And this is the final version of the fetch function I use in React Native apps to send POST requests with form data:

const response = await fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "multipart/form-data",
  },
  body: formData,
});

As long as the formData is structured correctly, it should work in any case.

If you are interested in React Native posts, check out my other posts such as: “How to Use SVGs in React Native”.