Missing request token for request: <NSURLRequest: 0x60000253e5a0> { URL: file://
Problem
Description I just upgraded to RN 0.63.0 and all fine, but only for upload using axios, i get [code block] React Native version: System: OS: macOS 10.15.5 CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz Memory: 163.19 MB / 8.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.1 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: API Levels: 22, 23, 25, 26, 27, 28, 29 Build Tools: 23.0.3, 27.0.3, 28.0.3, 29.0.0, 29.0.2 System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-R | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.0 AI-193.6911.18.40.6514223 Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild Languages: Java: 1.8.0_221 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.0 => 0.63.0 npmGlobalPackages: react-native: Not Found Steps To Reproduce Here is my code snippet and that gives me error [code block] Expected Results Should upload file, it was fine in 0.62.2
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Add Request Token for Axios Upload in React Native 0.63.0
The missing request token error occurs due to changes in how React Native 0.63.0 handles file uploads with Axios. The upgrade may have affected the way tokens are managed in requests, particularly for local file URLs. This can lead to issues when trying to upload files without a valid request token.
Awaiting Verification
Be the first to verify this fix
- 1
Install Axios and React Native FS
Ensure that you have the latest version of Axios and react-native-fs installed to handle file uploads correctly.
bashnpm install axios react-native-fs - 2
Update Axios Request Configuration
Modify your Axios request to include a valid request token. This can be done by adding the appropriate headers to your request. Ensure that you are using the correct method for file uploads.
javascriptconst formData = new FormData(); formData.append('file', { uri: fileUri, type: 'image/jpeg', // or the appropriate mime type name: 'photo.jpg', }); axios.post('YOUR_UPLOAD_URL', formData, { headers: { 'Content-Type': 'multipart/form-data', 'Authorization': `Bearer ${yourToken}` // Include your token here } }); - 3
Check File URI Format
Ensure that the file URI is in the correct format. For local files, it should start with 'file://'. If using react-native-fs, make sure to use the correct method to get the file path.
javascriptconst fileUri = `${RNFS.DocumentDirectoryPath}/yourfile.jpg`; - 4
Test the Upload Functionality
Run your application and test the file upload functionality to ensure that the error is resolved. Monitor the network requests to confirm that the file is being uploaded successfully.
Validation
Confirm that the file uploads successfully without the missing request token error. Check the network tab in your development tools to ensure the request is being sent with the correct headers and that the response indicates a successful upload.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep