Missing Request Token For Request

Get all contacts from phonebook and upload to server but got following error. While append image in request body FormData Tried code pass file url contact thumbnailPath const p

Solution 1:

The issues comes from react-native@0.63.2's internal bug.

A quick solution is to revert this commit: https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339#diff-9a034658197479288c4d346a0eb4d98c

After manually revert this commit in node_modules, recompile the app and the image uploading will be working without any issues.

Replace the function loadImageForURL in /Libraries/Image/RCTLocalAssetImageLoader.mm with the following:

 - (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);
   };
 }

Solution 2:

This problem is fixed in 0.63.3 ✅

Solution 3:

**For IOS** in 
node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm   file

**Replace Below** 

 - -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
                                               size:(CGSize)size
                                              scale:(CGFloat)scale
                                         resizeMode:(RCTResizeMode)resizeMode
                                    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
                                 partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
                                  completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
{
  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 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 

Solution 4:

I have the same issue which perfectly reproducible on one of the iPhone 7 on my react-native project. It's strange but another iPhone 7's works perfectly as well as all Android devices.

My code:

formdata.append("file", {uri: photo.uri, name: name_img, type: 'image/jpeg' });

axios({
   url: `${API}${'/upload'}`,
   method: 'post',
   headers: {
      'Authorization': 'Basic ' + auth_token,
      'Content-Type':'application/x-www-form-urlencoded'
   },
   data: formdata
}).then(response => this.saveRoute())
  .catch(err => {         
     this.props.errorMessage({message: err})
  }
})

Few things that I investigate:

• I was not able to catch it in debug mode (seams smth wrong in async calls?)
• I was not able to catch it with try-catch statement but seams it happened in Axios call.

So, I tried to play with Timeout and was able to make it totally unreproducible with 300ms timeout before Axios call.

formdata.append("file", {uri: photo.uri, name: name_img, type: 'image/jpeg' });
    setTimeout(() =>
      axios({
        url: `${API}${'/upload'}`,
        method: 'post',
        headers: {
          'Authorization': 'Basic ' + auth_token,
          'Content-Type':'application/x-www-form-urlencoded'
        },
    data: formdata
  }).then(response => this.saveRoute())
    .catch(err => {
        this.props.errorMessage({message: err})
      }
    })
  , 300);

I know that it's a workaround but may help others to understand the issue for more deep research.

Solution 5:

I temporary fixed using rn-fetch-blob, but the issue is present in 0.63.2 version and I didn't want to patch node_modules react-native images library.