React-native: Fetch Request fails on android only

[karanpratapsingh]

🐛 Bug Report

I am not able to understand why my fetch request with multipart/formdata are failing for no
apparent reason, the error just shows fetch request failed.

The strange part is the request completes on my backend like normal and my backend even send the response to the app till then the app has already failed to fetch.

Also, the same request completes the first time but failed after that.
This works flawlessly on my ios devices.

Things I've already tried:

• Content-Type header is present
• Form data is correct (i've tripple checked)
• request url is https
• form data image field has type property

Code Example

let body = await jsonToFormDataParser(...blah blah form data);

let { newCard: updatedCard, success } = await fetch(`${serverUrl}/api/create/card`, {

            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
            },
            body
        }).then(res => res.json());

Any help would be fantastic

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
Memory: 183.94 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.10.0 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.3, 25.0.1, 25.0.2, 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3
System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs In
tel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5264788
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.3 => 0.59.3
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

[legion-zver]

@karanpratapsingh i had a similar problem and the fault was the SSL certificates (backend). If You cannot replace certificates on the server, you can use pinning (or ready packages, for example react-native-ssl-pinning or manual set to OkClient + TrustKit)

[karanpratapsingh]

@legion-zver thank you for the reply, did your request also work on iOS but not on android only?
I'll check out your resources, thank you

[karanpratapsingh]

Hey, I am closing this issue as I found the problem, the problem was my form data, a certain field in it was undefined, tho I do wish that the error was more informative than Network request failed and more like something went wrong etc.

👍 🎉

[DodoTheDeveloper]

Hey for people wondering which field @karanpratapsingh could mean. For us it was the type field (mime-type) of the form-data. We set it hardcoded to "image" instead of "image/jpeg". Not providing the subtype (jpeg) was enough on Android fail the request.

I could swear this was previously working. Maybe the stronger validation came with Android X together? Hope this helps some people!

Example code with image/jpeg mime-type hardcoded:

        const body = new FormData();
        // adding meta data for request
        body.append('type', type);
        body.append('height', height);
        body.append('width', width);


        body.append(payload, { 
                uri: uri,
                name: filename,
                filename: filename,
                type: 'image/jpeg', //<-- this was only 'image' before and failed on Android only.
            },
        );

[reddeguzman]

@DodoTheDeveloper how does your comment solve this issue? https://github.com/facebook/react-native/issues/25244