缺少请求的请求令牌答案

【问题标题】：Missing request token for request缺少请求的请求令牌
【发布时间】：2019-07-06 21:57:12
【问题描述】：

从电话簿中获取所有联系人并上传到服务器，但出现以下错误。

在请求正文中追加图片时FormData

试用过的代码

传递文件 url 联系人 thumbnailPath

const path = con.thumbnailPath
body.append('image', {
     uri: path,
     type: 'image/jpeg',
     name: 'photo.jpg',
     type: 'multipart/form-data'
})

试用过的代码

不带“file://”传递文件 url 联系人 thumbnailPath

const path = con.thumbnailPath.replace('file://', '')
body.append('image', {
     uri: path,
     type: 'image/jpeg',
     name: 'photo.jpg',
     type: 'multipart/form-data'
})

试用过的代码

使用react-native-fs检查路径上是否存在文件

if (con.thumbnailPath != '') {
     let isExist = RNFS.exists(con.thumbnailPath)
     if (isExist) {
         const path = con.thumbnailPath.replace('file://', '')
         console.log("Exist", path)
         body.append('image', {
             uri: path,
             type: 'image/jpeg',
             name: 'photo.jpg',
             type: 'multipart/form-data'
         })
     }
}

请求

fetch(url, {
    method: 'POST',
    headers: {
        'Authorization': token,
        'token': token
    },
    body: params 
})
.then((res) => res.json())
.then((json) => {
    console.log("RESPONSE:- ", json)
    if (json.response[0].status == 'false') {
        let msg = json.response[0].response_msg
        callback(new Error(msg), json.response[0])
    }
    else {
        callback(null, json.response[0])
    }
})
.catch((err) => {
    console.log(err)
    callback(err, null)
})

【问题讨论】：

标头中似乎缺少您的请求令牌。请确保 API 在 postman 或其他工具中正常工作
这不是一个 api 错误@HiteshSurani 在将图像附加到正文时崩溃问题
有同样的问题。 @HarshalValanda 你是怎么解决的？
我也有同样的问题。你是怎么解决的？ @HarshalValanda
@RenielRamosSalvador 更改原生模块 RCTNetwork.m

标签： javascript ios react-native request multipartform-data

【解决方案1】：

修复了将 React Native 更新到版本 0.63.3 时出现的错误

【讨论】：

【解决方案2】：

这个问题在 0.63.3 中修复了 ✅

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

我使用rn-fetch-blob 临时修复了这个问题，但问题出现在 0.63.2 版本中，我不想修补 node_modules react-native 图像库。

【讨论】：

【解决方案5】：

问题来自react-native@0.63.2的内部错误。

一个快速的解决方案是恢复这个提交：https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339#diff-9a034658197479288c4d346a0eb4d98c

在node_modules 中手动还原此提交后，重新编译应用程序，图像上传将正常工作。

将/Libraries/Image/RCTLocalAssetImageLoader.mm 中的函数loadImageForURL 替换为以下内容：

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

【讨论】：

不错的提示，但是如果不降级整个反应，有什么解决方案？ “react-native”：“github:facebook/react-native#31980094107ed37f8de70972dbcc319cc9a26339”？
您可以使用npmjs.com/package/patch-package轻松应用补丁

【解决方案6】：

我找到了解决方案。只需在您发布请求时延迟即可。

let options = {}

options.headers = headers
options.method = 'POST'

let url = {SERVER_URL}

options.body = new FormData();
for (let key in data) {
   options.body.append(key, data[key]);
}
setTimeout(() => {
  fetch(url, options)
    .then((response) => response.json())
    .then((responseJson) => {
         resolve(responseJson);
     })
     .catch((error) => {
         let errParam = {}
         errParam.errMsg = error.toString()
         console.log(errParam)
         resolve(errParam);
    })
}, 1000);

【讨论】：

【解决方案7】：

我有同样的问题，在我的 react-native 项目中的一部 iPhone 7 上完全可以重现。这很奇怪，但另一款 iPhone 7 与所有 Android 设备一样完美运行。

我的代码：

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

我调查的几件事：

我无法在调试模式下捕获它（异步调用中的接缝错误？）
我无法通过 try-catch 语句捕捉到它，但接缝它发生在 Axios 调用中。

因此，我尝试使用 Timeout，并且能够通过 在 Axios 调用前 300 毫秒超时使其完全无法重现。

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

我知道这是一种解决方法，但可以帮助其他人了解该问题以进行更深入的研究。

【讨论】：

【解决方案8】：

要发送文件，您必须创建一个 FormData 并将您的文件附加到其中。见EX：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Uploading_a_file

【讨论】：