Ответ Axios не может перехватить код состояния 302?

HTTP

Эта статья основана на небольшом СЛУЧАЕ, с которым столкнулись в работе: использование AXIOS для перехвата ответа сервера на код состояния 302.

описание сцены

Многие веб-сайты будут иметь проверку входа, и процесс выглядит следующим образом:

  1. перейти по URL-адресу веб-сайта;
  2. Если сервер обнаруживает, что запрошенный файл cookie не содержит данных для входа (обычно это токен), он возвращает ответ о перенаправлении с кодом состояния 302 и записывает адрес перенаправления в поле Location заголовка ответа, где мы и входим в систему. URL-адрес .
  3. После того, как браузер получит ответ и обнаружит, что это 302, он будет использоватьgetМетод повторно запрашивает URL-адрес для входа, указанный в Location;
  4. После ввода пароля учетной записи Войти после URL-адреса входе в систему, сервер ответитSet-CookieНапишите нашу информацию для входа в браузер, и код браузера повторно перейдет на страницу, которую мы посетили в начале.

Выше приведен наиболее распространенный процесс входа на веб-сайт. Среди них ответ кода состояния 302 очень важен, он направляет нас на правильную веб-страницу для входа в систему.

Обычно это происходит, когда пользователь вводит адрес прямо в браузере. Ситуация, с которой я недавно столкнулся: я договорился с бэкендом, чтобы использовать axios для запроса интерфейса бэкенда через Ajax, если он обнаружит, что нет логина, бэкэнд вернет ответ о перенаправлении 302, и тогда я получу Location адрес в ответе. Перейдите по этому адресу, чтобы войти.

Это кажется простым и требует всего три шага:

  1. послать запрос;
  2. Оцените код состояния в ответе axios, если он равен 302, получите адрес Location в заголовке ответа;
  3. Используйте код JS для управления прыжком браузера.

фактическая реализация

Первое, что нужно сделать, это получить ответ от axios. Логика axios, оценивающая код состояния нормального ответа, следующая:

validateStatus: function (status) {
    return status >= 200 && status < 300; // default
}

Поэтому нам нужно изменить логику проверки, чтобы код состояния 302 также можно было считать нормальным ответом:

validateStatus(status) {
    return status >= 200 && status < 300 || status === 302;
}

Затем выполните обработку в ответе axios:

axios({
    url: '/api',
}).then(res => {
    const { status, headers: { Location } } = res;
    if (status === 302) {
        window.location.href=  Location;
    }
})

Хороший! очень просто~

Но на практике оказалось, что код вообще не добегал до шага обработки ответов аксиом, а напрямую использовалgetМетод запросил адрес перенаправления. Думаю, это может быть поведение axios по умолчанию, но после ознакомления с официальной документацией не было найдено соответствующей конфигурации для отключения этой функции. единственныйmaxRedirectsОпции, применяются к Nodejs.

Поискав соответствующую информацию в Интернете, я обнаружил, что кто-то также упомянулЭта проблема,Причина:Ajax не может обрабатывать ответы с кодом состояния 302, что является поведением браузеров по умолчанию.. консультируясьстандартный, стандарт про AjaxreadyState = 2указывает, что все действия по перенаправлению (если они были) выполнены и все заголовки ответа получены:

All redirects (if any) have been followed and all headers of a response have been received.

То есть метод запроса Ajax, когда ответ получен, все перенаправления завершены.

Код состояния перенаправления по умолчанию

После экспериментов все коды состояния перенаправления:

  • 301: Moved Permanently
  • 302: Found
  • 303: See Other
  • 307: Temporary Redirect
  • 308: Permanent Redirect

Код можно найти наgithubВы можете просматривать.

Если у вас есть какие-либо вопросы, добро пожаловать на обсуждение ~ Эта статья впервые появилась на моемблог, добро пожаловать, чтобы нажать ~

Категории