Я использую 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 };
Вот скриншоты сетевой активности в браузере:
Авторизоваться:

Блог:

Вот журналы:
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
@TonyB Я загрузил скриншоты сетевой активности страниц входа и блога (в самом низу поста). Как видите, в логине есть ответ 302 -> перенаправление. Там файл cookie сеанса хранится в Set-Cookie с идентификатором = 12qD...... Затем после нескольких перенаправлений он достигает блога с ответом 200, а Set-Cookie не содержит идентификатора = 12qD...
Я думаю, это то, с чем вы столкнулись... stackoverflow.com/questions/42716082/…



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вместо того, чтобы использовать руководство, попробуйте использовать ошибку
Поскольку использование перенаправления для ручной фильтрации перенаправлений может позволить подделка перенаправлений, вы должны вместо этого установить режим перенаправления на "ошибка" в параметре инициализации при вызове fetch()
Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Response/redirected#disallowing_redirects
Пробовал это, тот же результат. Не входит в блок .catch, просто выполняется нормально.
В настоящее время ручное перенаправление не работает с API-интерфейсом fetch на React-Native (см. здесь)
Спасибо, что указали на проблему с ручным управлением, не работающим с React Native. Однако я думаю, что остальная часть ответа не совсем связана с моим вопросом. Вопрос не в том, как перенаправить вручную, а в том, как поймать перенаправление, чтобы я смог получить шапку первой страницы (Логин). С вашим подходом я все равно получу ответ со страницей блога, которая не содержит cookie.
Мне жаль. Я думаю, я действительно не понимаю ловлю перенаправления. Вы пробовали использовать аксиомы?
Я также не очень хорошо разбираюсь в сети, но, насколько я понимаю, проблема, с которой я столкнулся, заключается в следующем: я отправляю HTTP-запрос на страницу входа, но сервер отвечает: «Вы вошли в систему, вот ваш файл cookie сеанса. Теперь вы должны перейти на страницу блога». Я хочу сказать «нет, спасибо, мне просто нужен этот первый ответ» и получить файл cookie сеанса из ответа. Но Fetch API прыгает и отвечает серверу без моего разрешения «конечно, я буду следовать», а затем сервер снова отвечает «вы успешно подписались на блог». И затем он «переопределяет» первый ответ от входа в систему, который имеет файл cookie сеанса: \
По поводу Аксиоса. Да, я пробовал, и кажется, что это делает то же самое. В документации сказано, что я могу использовать maxRedirects: 0, чтобы не следовать перенаправлениям. Однако это не работает для React Native. На github есть много вопросов, указывающих на эту проблему, а также в исходных документах axios есть комментарий // maxRedirects определяет максимальное количество перенаправлений в node.js. Но я в RN, а не в узле :c.
У меня такое ощущение, что единственное решение - создать правильную конечную точку на стороне сервера, которая никуда меня не перенаправит и даст простой ответ с файлом cookie сеанса.
Я пометил ваш вопрос как принятый, так как первая часть вашего ответа прямо ответила, почему перенаправление не работает в React Native в API выборки. Остальную часть вашего ответа я считаю дополнительной информацией :). Спасибо!
я удалил это
Первым делом я бы проверил сетевую активность в инструментах браузера. Посмотрите, соответствует ли это вашим ожиданиям с точки зрения ответов.