Как обработать редирект (перенаправление) после AJAX-запроса в jQuery?

Проблема: почему AJAX не обрабатывает редирект?

Вы столкнулись с классической особенностью AJAX-запросов. Браузер автоматически следует за редиректами (статусы 301, 302, 307, 308) на уровне HTTP, но это происходит прозрачно для JavaScript. jQuery получает финальный ответ (после всех редиректов), а не промежуточный статус 302. Поэтому ваш success-коллбэк срабатывает с содержимым страницы /dashboard, но браузер не меняет URL в адресной строке.

Решение 1: Возвращать JSON с URL для редиректа (рекомендуется)

Самый правильный подход — изменить логику сервера. Вместо HTTP-редиректа возвращайте JSON-объект с кодом статуса и URL для перенаправления. Затем обрабатывайте это на клиенте.

На сервере (Node.js/Express):

app.post('/api/login', (req, res) => {
    const { username, password } = req.body;
    
    // Проверка логина...
    if (loginSuccess) {
        // Вместо res.redirect('/dashboard')
        res.json({ 
            redirect: '/dashboard',
            status: 'success'
        });
    } else {
        res.json({ 
            error: 'Неверный логин или пароль',
            status: 'error'
        });
    }
});

На клиенте (jQuery):

$.ajax({
    url: '/api/login',
    type: 'POST',
    data: { username: 'user', password: 'pass' },
    dataType: 'json', // Важно!
    success: function(response) {
        if (response.status === 'success' && response.redirect) {
            // Выполняем редирект вручную
            window.location.href = response.redirect;
        } else if (response.error) {
            alert('Ошибка: ' + response.error);
        }
    },
    error: function(xhr, status, error) {
        console.error('Ошибка AJAX:', error);
    }
});

Решение 2: Проверять URL в ответе (если сервер нельзя менять)

Если у вас нет доступа к серверу, можно анализировать ответ. Когда сервер делает редирект, jQuery получает HTML страницы назначения. Вы можете проверить, не содержит ли ответ признаков редиректа.

$.ajax({
    url: '/api/login',
    type: 'POST',
    data: { username: 'user', password: 'pass' },
    complete: function(xhr, status) {
        // Проверяем, был ли редирект по заголовкам
        var redirectUrl = xhr.getResponseHeader('X-Redirect');
        
        if (redirectUrl) {
            window.location.href = redirectUrl;
        } else {
            // Обработка обычного ответа
            console.log('Ответ:', xhr.responseText);
        }
    }
});

Но этот метод требует, чтобы сервер добавлял кастомный заголовок X-Redirect.

Решение 3: Использовать fetch API (современный подход)

Современный fetch позволяет отключить автоматическое следование редиректам:

fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'user', password: 'pass' }),
    redirect: 'manual' // Не следовать редиректу
}).then(response => {
    if (response.type === 'opaqueredirect') {
        // Получаем URL редиректа
        const redirectUrl = response.headers.get('Location');
        window.location.href = redirectUrl;
    } else {
        return response.json();
    }
}).then(data => {
    console.log('Данные:', data);
});

Важно: Этот метод может не работать в старых браузерах (IE). Для поддержки используйте полифиллы.

Рекомендации

• Лучшая практика: Используйте JSON-ответ с явным указанием URL для редиректа. Это самый надежный и понятный способ.
• Безопасность: Всегда проверяйте URL редиректа на клиенте (например, что он ведет на ваш домен), чтобы избежать open redirect уязвимостей.
• UX: Показывайте индикатор загрузки между отправкой формы и редиректом.

$.ajax({
    url: '/api/login',
    type: 'POST',
    data: { username: 'user', password: 'pass' },
    dataType: 'json',
    success: function(response) {
        if (response.redirect) {
            // Создаем скрытую форму
            var form = $('<form>', {
                action: response.redirect,
                method: 'GET', // или 'POST', если нужно
                style: 'display: none'
            });
            
            // Добавляем данные, если нужно
            form.append($('<input>', {
                name: 'token',
                value: response.token,
                type: 'hidden'
            }));
            
            // Добавляем форму в DOM и отправляем
            $('body').append(form);
            form.submit();
        }
    }
});