Fetch API не перехватывает перенаправления с перенаправлением: «вручную» в проекте React Native

Я использую Fetch API в своем проекте React Native. Я делаю запрос HTTP POST на сервер, который ожидает имя пользователя и пароль. Если вход в систему выполнен успешно, сервер устанавливает файл cookie сеанса на странице входа, а затем перенаправляет на другую веб-страницу под названием «Блог». Fetch API получает ответ от блога, у которого нет файла cookie сеанса. Поэтому мне нужно поймать перенаправление и сохранить файл cookie сеанса до того, как произойдет перенаправление.

В документации сказано, что redirect: 'manual' должен выполнять эту работу. Тем не менее, я все еще получаю ответ с самой последней страницы. Перенаправление не видно Fetch API — response.redirected возвращает undefined. Но URL запроса и ответа разные. Что потенциально может быть не так?

const url = 'url of a website ( cannot show it to you )';
// login request
const login = (profileName, password) => {
  const details = {
    benutzername: profileName,
    passwort: password,
  };

  const formBody = Object.keys(details)
    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(details[key])}`)
    .join('&');

  console.info(`formBody to be sent: ${formBody}`);

  fetch(url, {
    method: 'POST',
    headers: {
      Accept:
        'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: formBody,
    redirect: 'manual',
  })
    .then((response) => {
      console.info('! response type !');
      console.info(response.type);
      console.info('! is redirected !');
      console.info(response.redirected);
      console.info('! response console log !');
      console.info(response.url);
      console.info('! response status console log !');
      console.info(response.status);
      return response.headers;
    })
    .then((headers) => {
      console.info('! headers for each !');
      headers.forEach((value, key) => {
        console.info(`${key} ==> ${value}`);
      });
      return headers;
    })
    .catch((error) => console.info(`error: ${error}`));
};

export { login };

Вот скриншоты сетевой активности в браузере:

Авторизоваться: Fetch API не перехватывает перенаправления с перенаправлением: «вручную» в проекте React Native

Блог: Fetch API не перехватывает перенаправления с перенаправлением: «вручную» в проекте React Native

Вот журналы:

LOG  ! response type !
 LOG  default
 LOG  ! is redirected !
 LOG  undefined
 LOG  ! response console log !
 LOG  https://.../Blog.xhtml?faces-redirect=true&dswid=-8890
 LOG  ! response status console log !
 LOG  200
 LOG  ! headers for each !
 LOG  cache-control ==> no-cache, no-store, must-revalidate
 LOG  content-encoding ==> gzip
 LOG  content-type ==> text/html;charset=UTF-8
 LOG  date ==> Sun, 23 Jul 2023 14:54:59 GMT
 LOG  expires ==> 0
 LOG  pragma ==> no-cache
 LOG  server ==> Apache
 LOG  set-cookie ==> dsrwid--8890=-8890; path=/; secure; Max-Age=60; Expires=Sun, 23-Jul-2023 14:55:59 GMT; SameSite=None
 LOG  vary ==> Accept-Encoding

Первым делом я бы проверил сетевую активность в инструментах браузера. Посмотрите, соответствует ли это вашим ожиданиям с точки зрения ответов.

Tony B 23.07.2023 17:05

@TonyB Я загрузил скриншоты сетевой активности страниц входа и блога (в самом низу поста). Как видите, в логине есть ответ 302 -> перенаправление. Там файл cookie сеанса хранится в Set-Cookie с идентификатором = 12qD...... Затем после нескольких перенаправлений он достигает блога с ответом 200, а Set-Cookie не содержит идентификатора = 12qD...

DanilKarlos 23.07.2023 17:22

Я думаю, это то, с чем вы столкнулись... stackoverflow.com/questions/42716082/…

Tony B 24.07.2023 05:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
53
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вместо того, чтобы использовать руководство, попробуйте использовать ошибку

Поскольку использование перенаправления для ручной фильтрации перенаправлений может позволить подделка перенаправлений, вы должны вместо этого установить режим перенаправления на "ошибка" в параметре инициализации при вызове fetch()

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Response/redirected#disallowing_redirects

Пробовал это, тот же результат. Не входит в блок .catch, просто выполняется нормально.

DanilKarlos 23.07.2023 18:14
Ответ принят как подходящий

В настоящее время ручное перенаправление не работает с API-интерфейсом fetch на React-Native (см. здесь)

Спасибо, что указали на проблему с ручным управлением, не работающим с React Native. Однако я думаю, что остальная часть ответа не совсем связана с моим вопросом. Вопрос не в том, как перенаправить вручную, а в том, как поймать перенаправление, чтобы я смог получить шапку первой страницы (Логин). С вашим подходом я все равно получу ответ со страницей блога, которая не содержит cookie.

DanilKarlos 23.07.2023 18:33

Мне жаль. Я думаю, я действительно не понимаю ловлю перенаправления. Вы пробовали использовать аксиомы?

PhantomSpooks 23.07.2023 18:56

Я также не очень хорошо разбираюсь в сети, но, насколько я понимаю, проблема, с которой я столкнулся, заключается в следующем: я отправляю HTTP-запрос на страницу входа, но сервер отвечает: «Вы вошли в систему, вот ваш файл cookie сеанса. Теперь вы должны перейти на страницу блога». Я хочу сказать «нет, спасибо, мне просто нужен этот первый ответ» и получить файл cookie сеанса из ответа. Но Fetch API прыгает и отвечает серверу без моего разрешения «конечно, я буду следовать», а затем сервер снова отвечает «вы успешно подписались на блог». И затем он «переопределяет» первый ответ от входа в систему, который имеет файл cookie сеанса: \

DanilKarlos 23.07.2023 19:30

По поводу Аксиоса. Да, я пробовал, и кажется, что это делает то же самое. В документации сказано, что я могу использовать maxRedirects: 0, чтобы не следовать перенаправлениям. Однако это не работает для React Native. На github есть много вопросов, указывающих на эту проблему, а также в исходных документах axios есть комментарий // maxRedirects определяет максимальное количество перенаправлений в node.js. Но я в RN, а не в узле :c.

DanilKarlos 23.07.2023 19:33

У меня такое ощущение, что единственное решение - создать правильную конечную точку на стороне сервера, которая никуда меня не перенаправит и даст простой ответ с файлом cookie сеанса.

DanilKarlos 23.07.2023 19:36

Я пометил ваш вопрос как принятый, так как первая часть вашего ответа прямо ответила, почему перенаправление не работает в React Native в API выборки. Остальную часть вашего ответа я считаю дополнительной информацией :). Спасибо!

DanilKarlos 24.07.2023 14:24

я удалил это

PhantomSpooks 24.07.2023 14:52

Другие вопросы по теме