react-native: Missing request token for request: { URL: file://
Description
I just upgraded to RN 0.63.0 and all fine, but only for upload using axios, i get
Missing request token for request: <NSURLRequest: 0x60000253e5a0> { URL: file:
React Native version:
System: OS: macOS 10.15.5 CPU: (4) x64 Intel® Core™ 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
const cleanURL = body.imageData.uri.replace("file://", "");
const data = new FormData();
let fileName = body.imageData.fileName ? body.imageData.fileName : moment().unix()+'.jpg'
data.append('file', {
uri: cleanURL,
name: fileName,
type: body.imageData.type
});
data.append('fileName', fileName)
return axiosclient.post(
'/upload,
data,
{
headers: {
"content-type": "multipart/form-data"
}
}
).then(res => {
}).catch(err => {
})
Expected Results
Should upload file, it was fine in 0.62.2
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 60
- Comments: 113 (14 by maintainers)
Commits related to this issue
- Fix race-condition when loading local images In local images, the callback is called inline, and so requestToken is always nil at the time the block is executed. In this case, the requestToken is irr... — committed to ModernLogic/react-native by paddlefish 4 years ago
- Fix "Missing request token for request" issue https://github.com/facebook/react-native/issues/29364#issuecomment-670150318 — committed to Clearcover/react-native by tomtargosz 4 years ago
@struct78 thanks for the repro!
Update:
I’ve identified the issue, in https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339 I’ve broken the invariant that every
[RCTImageURLLoader loadImageForURL]
returns a request token.Fix is under review.
For anyone else having this issue, as a temporary fix update your local file:
node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm
and replace the Obj-C methodshouldCacheLoadedImages
with the followingdataForm.append(‘file’, { uri: Platform.OS==‘ios’?photo.uri.replace(“file://”, “/private”):photo.uri, name: ‘photo.jpg’, type: ‘image/jpg’ });
IOS : photo.uri.replace(“file://”, “/private”)
It only works for the real device, on simulator still give the error but at least you can deploy your app until this issue is patched
The main issue like someone mentioned is within
RCTImageLoader.mm
implementation:Error is thrown out because
requestToken
isnil
. Like someone else has pointed out it is nil becausecompletionBlock
executes beforerequestToken
is initialised. It happens because some image loader is performing task synchronously.I’ve managed to fix issue for my project by reverting this commit: https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339#diff-9a034658197479288c4d346a0eb4d98c
React Native 0.63.3 is available now. And in my local testing, this issue is now resolved. Thanks so much, all!
Hey, I caught up @helderburato and we tried some approaches. This seems an error not much related to
token
, even the error sending this message.TL;DR: We do not manage to correct the issue. But we made some research, discovered something about it, created assumptions but for now, we are downgrading the version of our RN lib to 0.61.4. Here is what we managed to discover! 😄
Some steps to catch what we accomplish:
RCTNetworkTask.mm
, methodstart()
:RCTNetworkTask.mm
, methodvalidateRequestToken()
:Then I identified an issue with
RCTImageLoader
on calling the methodsendRequest()
. Then I went across the implementation inside theRCTImageLoader.mm
file and added some logs inside of it. After discussing with an iOS developer friend (@Cherobin) that knows how Obj-C works, we created the assumption of the problem being the callback fromrequestToken
not being fulfilled resulting in token beingnil
(null
). This maybe happens because of how quick the code executes in comparison of how slow the callback is executed based on image size. We are reducing the image size with a JS lib before sending requests, so this happens with even a small size of images.We tried to use a
Semaphore
but it seems not to resolve the issue. At the fileRCTImageLoader
we created some logs atsendRequest()
and the following code is what we produced:Hope that helps someone! 😄
For now
If you want to lock a version (using latest nightly), but the podspecs are broken so you’ll have to edit
and change the version to “6.3.2” to be be able to install the pods until the make a fix for the nightlies.
Or if you want the latest build without any locking
which the Podspecs dont break, but youre at the mercy of new bugs obviously each time you build. In my opinion these are the only two correct solutions, instead of trying to hack pieces of the package
in node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm file
Replace Below
return nil; }
With
-(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL size:(CGSize)size scale:(CGFloat)scale resizeMode:(RCTResizeMode)resizeMode progressHandler:(RCTImageLoaderProgressBlock)progressHandler partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler completionHandler:(RCTImageLoaderCompletionBlock)completionHandler { __block auto cancelled = std::make_shared<std::atomic<bool>>(false); RCTExecuteOnMainQueue(^{ if (cancelled->load()) { return; }
UIImage *image = RCTImageFromLocalAssetURL(imageURL); if (image) { if (progressHandler) { progressHandler(1, 1); } completionHandler(nil, image); } else { NSString *message = [NSString stringWithFormat:@“Could not find image %@”, imageURL]; RCTLogWarn(@“%@”, message); completionHandler(RCTErrorWithMessage(message), nil); } });
return ^{ cancelled->store(true); }; }
This…
Like and Love , if it work 👍
Seem to still has the error in React-Native version 0.63.2. Plz help me… ExceptionsManager.js:179 Missing request token for request: <NSURLRequest: 0x6000019b3580> { URL: file:///Users/…/…/Data/Application/F880FB79-B4FB-40BB-9F34-2FAE72753A07/Documents/images/E4CC6AA6-895D-426C-97A6-B65EFE3360AB.jpg }
ExceptionsManager.js:179 Error processing request body: Error Domain=RCTErrorDomain Code=0 “Invalid request token.” UserInfo={NSLocalizedDescription=Invalid request token.}
Seem to still has the error in React-Native version 0.63.2.
Here is a minimal repo that demonstrates this error. Choose a file from the camera roll and then try to retrieve that using fetch.
https://github.com/struct78/react-native-0.63.1-missing-request-token
The issue is still here with 0.63.1, 100% reproducible on iOS. (tested with fetch and axios) The problem seems to come from
loadImageWithURLRequest
as mentioned hereSame issue on v0.63.2
npx react-native upgrade
upgraded to v0.63.3 fixed the error.There are workarounds in this thread (eg. reverting https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339#diff-9a034658197479288c4d346a0eb4d98c by using
patch-package
). It takes like 5 minutes to do this so for everybody with this issue please do that and let’s monitor what the team is doing.For sure if it’s gonna be fixed in the next version someone will mention this here.
@ajanauskas Looks promising, but unfortunately it didn’t change anything for me.
My patch looks like this
Is that all that needs to be done?
upload form data image with axios fixed with v0.63.3
I was able to resolve this in two ways Either one can be used to resolve but both require to do some changes in node_modules/react-native/Libraries/Image A) https://github.com/facebook/react-native/pull/29595 Replace the - (id)sendRequest:(NSURLRequest *)request withDelegate:(id<RCTURLRequestDelegate>)delegate function in node_modules/react-native/Libraries/Image/RCTImageLoader.mm with below
B)https://stackoverflow.com/questions/54663887/missing-request-token-for-request
Replace the function loadImageForURL in /Libraries/Image/RCTLocalAssetImageLoader.mm with the following:
0.63.2 still exist
For those encountering this issue, I think I found a fix and have submitted a PR: https://github.com/facebook/react-native/pull/29595 The minimal line is to initialize
requestToken
by addint= ^{};
tosendRequest:withDelegate:
in RCTImageLoader.mm on line 1044 approximately.Interesting. However, this doesn’t seem to have fixed it for me. Problem is only present on the simulator, no issue on an actual device. In addition, my simulator also freezes after accessing the image and requires a restart.
Same issue with axios after update to
0.63.1
.This problem only happens on the iOS (simulator/device).
Related issues: https://github.com/facebook/react-native/issues/28551 https://github.com/facebook/react-native/issues/29021
Same issue with axios after update to 0.63.0
Same issue with
fetch
for me when updating to 0.63.0.Will it be fixed in the next version of RN?
I can confirm that both of these solutions worked for me. Earlier I said it didn’t work on iOS but I eventually found out why. Posting here in case anyone else has the same issue on React Native 0.63.2 (after making the above changes). Apparently my issue was that
react-native-image-picker
was not grabbing the file name on iOS. This didn’t happen on earlier versions, but apparently that’s what was preventing upload for me. For more context, I am using Node JS and Multer on my backend. Hope this helps someone.Seems weird this hasn’t been resolved and released yet. No one using 0.63 can build an app that uploads files until then.
@caiangums , yup, that hack is a bad method, just a temporary hack to make it working. Still require react-native developer to provide a real fix for this issue.
Great! But is it available in the Expo RN version?
Nice temporary hack! It works in RN 0.63.2 I think we can do one more step.
copy the hacked RCTNetworkTask.mm into ios folder. create a script ‘runThisPodInstall.sh’ in ios folder with these content:
#!/bin/sh rm -rf *.xcworkspace rm -rf Pods/ cp -f RCTNetworkTask.mm …/node_modules/react-native/Libraries/Network/ pod install
chmod +x runThisPodInstall.sh everytime we remove the node_modules, wait for yarn install to be done, cd ios and ./runThisPodInstall.sh
is that work?
Hey all, after looking through the entire thread, it looks like this issue was resolved on
master
once @sammy-SC 's fix, ffc90c7f92e63e1a53ed107833e3deed492ab435 landed. That occurred on July 28.The fix is not present in 0.63.2. Samuel already requested this fix to be cherry-picked into a 0.63.3 release, if there is one (see https://github.com/react-native-community/releases/issues/203#issuecomment-665754860).
Several workarounds have been shared on this thread, such as cherry-picking the fix, or reverting the offending commit, into your own React Native custom release. You may also consider downgrading, waiting for the next 0.64 release to be cut, or using a nightly build from after July 28 (see https://www.npmjs.com/package/react-native).
To discuss a 0.63.3 or 0.64.0 release, please use the appropriate release issue at https://github.com/react-native-community/releases/issues.
Under normal circumstances, I would probably agree, but patch-package is a no brainer with how easy it is to add, plus it is a stable solution since it saves the patch script and applies it on install.
There is already a working fix and PR that has been sitting for weeks
Check out patch-package. It’s a very easy way to apply patches and when you update the component, it reminds you to update the patch – or if the bugs are fixed you can just delete the patch.
Facing this issue after upgrading RN to 0.63.2
Now I have encountered a new problem. The first upload is ok and the picture is displayed normally. After that, if I want to modify the picture, the second upload will have the same error
thank you bro, this is very work for me, rather than waiting for an update from react native that is very long
@caiangums , so far so good from my application to upload and download image with the hack. Again, it is still bad hack, still need to wait react-native developer to fix it. Also, I believe upgrade Flipper version will fix the issue but I am not sure how to upgrade Flipper version in IOS/podfile.
Hey! Can you tell more about how you did it and deliver an example to reproduce it?
i have the same issue RN 0.63.1 any updates ? !
it was just working fine before i upgrade to 0.63
Error fixed when updating React Native to version 0.63.3
v0.63.3 axio / expo and react native i am still having problem request token in the upload of image formData IOS
Can also confirm that with RN 63.3 I am no longer seeing the issue.
In my opinion, fixing a library in node_modules is a bad solution and it should avoid as much as possible and it should be only the last chance to compile and launch the application.
In all other cases, it should be used a more stable solution (in this case, rn-fetch-blob).
Using
rn-fetch-blob
does not require any fixes.To temporarily correct this problem in CI, I added a post-installation to package.json, to run a script that replaces the RCTLocalAssetImageLoader.mm file in the node_modules folder. The file used for content replacement is the file quoted at https://github.com/facebook/react-native/issues/29364#issuecomment-670150318. In the file fix_ios.sh it has the command:
cat config/fix_ios/RCTLocalAssetImageLoader.mm > node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm
in package.json postinstall looks like this:
… “scripts”: { “postinstall”: “sh ./fix_ios.sh”, …
@caiangums No problem! I appreciate you trying to help. And yes I’ve already made that change, and unfortunately it didn’t work for me. Crossing my fingers that we have a fix/solution coming soon.
None of these patching solutions seem to work on the latest version of React Native
0.63.2
@Monojitgit read the whole thread, it already provides couple of workarounds/solutions. (eg. reverting 3198009 by using patch-package)
this seems to be working just replacing line __block RCTImageLoaderCancellationBlock requestToken; with __block RCTImageLoaderCancellationBlock requestToken = ^{}; fixed the issue.
You could use
patch-package
to run as a post install step. That’s what I’ve done0.62 worked with no issues
@osikes Yep, this is actually pretty ridiculous. The patch doesn’t seem to work on my CI either and couldn’t roll back to 62 without breaking changes. Now stuck not able to release an app version until an update is available.
@keithhackbarth The original issue and error information added to this issue seems pretty iOS specific. If you’re seeing something similar on android i’d suggest opening a separate issue.
Worth noting that the above fix only works on iOS and similar issue appears to exist on Android
Hey @uusa35, thanks for your reply. My request is for an example to reproduce. As far as I can see, your comment just has some prints from your code and it was traced that the issue may be related to some bug inside the Objective-C RN lib.
Just to be clear:
find the comment below https://github.com/facebook/react-native/issues/29364#issuecomment-660718932
also i can confirm that my solution worked on ios but not on android. so weird
I also have same issue. I use hack for this https://github.com/facebook/react-native/issues/29021#issuecomment-662196480.