React Native / Expo: выборка выдает ошибку «Ошибка сетевого запроса» в ответе 401 с типом содержимого formData - PullRequest
3 голосов
/ 09 апреля 2019

Я создаю приложение expo, которое взаимодействует с бэкэндом Django Rest Framework. Я использую fetch, чтобы получить и опубликовать данные на моем сервере, и у меня настроена аутентификация JWT. Fetch работает так, как я ожидал, отправляя данные json на мой сервер.

Я также пытаюсь опубликовать некоторые изображения на своем сервере, и это работает, как и ожидалось, пока не истечет срок действия моего токена и сервер не вернет 401. Когда это происходит на Android, выбирайте, а не разрешайте правильно и получайте response.status 401 вместо этого бросает TypeError: Network request failed. На iOS просто висит.

Пример кода:

const formData = new FormData()
photos.map((photo, index) =>
  formData.append('images', {
    name: `test${index}.jpg`,
    type: 'image/jpeg',
    uri: photo.uri,
  }),
)
try {
  const response = await fetch(url, {
    body: formData,
    headers: {
      Authorization: `Bearer ${userToken}`,
    },
    method: 'POST'
  })
} catch (e) {
  console.log(e)
}

Извлечение обычно разрешается правильно, когда мой сервер возвращает 200 или 401, но когда я публикую данные изображения, 200-е разрешаются успешно, но 401-е вызывает выборку, которая вызывает ошибку сетевого запроса. Как я могу предотвратить это?

Редактировать : Дальнейшие исследования показывают, что строка кода Python images = request.FILES.getlist('images', []) имеет решающее значение для отсутствия этой ошибки. Если я вручную вернусь до этой строки кода, я получу ту же проблему. Я предполагаю, что это как-то связано с прерыванием многоэтапной загрузки из-за ошибки, но я не уверен, как справиться с этим в приложении.

1 Ответ

0 голосов
/ 10 апреля 2019

Вот мой простой код FormData с реагировать-нативный для отправки запроса со строкой и изображением.

Я использовал средство выбора изображений.

Не могли бы вы переключить заголовки?

let formdata = new FormData();

...

fetch('http://192.168.0.1/test',{
  method: 'post',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formdata
  }).then(response => {
    alert("sucess")
  }).catch(err => {
    console.log(err)
  })  
});
...