Fetch requests failing on Android to AWS S3 endpoint

问题

I am using React Native with Expo SDK 37. My request looks like the following:

export const uploadMedia = async (fileData, s3Data) => {
    console.log(fileData.type)
    let formData = new FormData();

    formData.append('key', s3Data.s3Key);
    formData.append('Content-Type', fileData.type);
    formData.append('AWSAccessKeyId', s3Data.awsAccessKey);
    formData.append('acl', 'public-read');
    formData.append('policy', s3Data.s3Policy);
    formData.append('signature', s3Data.s3Signature);

    formData.append('file', fileData.data);

    return fetch(`https://...restofendpoint`, {
        method: 'POST',
        //skipAuthorization: true,
        body: formData
    })
}

I am using presigned POST method. I get the following s3 data from another endpoint on our server and can confirm all the correct info is being populated. This works perfectly on iOS but when attempting to upload on Android I get the following error:

Network request failed
- node_modules\whatwg-fetch\dist\fetch.umd.js:473:29 in xhr.onerror
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574:29 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

I originally had all my requests using axios and tried to see if that was the issue by switching to fetch api. No avail. Pretty much stumped and at a standstill. Any help would be appreciated.

回答1:

After long searching in the depths of forum hell...

When posting data using FormData Android is picky and needs the following the file data type to be specified as image/jpg or video/mp4 for both my cases.

I was using the ImagePicker component from Expo so it by default returns:

{
   type: 'image' || type: 'video',
   ...other stuff
}

The network request failed resolved as soon as I fixed this issue. iOS apparently doesn't need this requirement so that is why is was working on iOS but not Android.

来源：https://stackoverflow.com/questions/61646892/fetch-requests-failing-on-android-to-aws-s3-endpoint

标签

react-native

amazon-s3

expo