Перенаправлять после отправки вызова

Я создаю страницу социального входа с сервером управления доступом (AM). Когда пользователь нажимает кнопку входа в систему, я делаю почтовый вызов fetch на сервере AM. Сервер AM генерирует ответ перенаправления HTTP 301 с файлами cookie на страницу социального входа. Мне нужно как-то следить за этим ответом на перенаправление и показывать новый контент в веб-браузере.

UI: ReactJS

Запрос:

POST /api/auth/socialauth/initiate HTTP/1.1
Host    example.com
User-Agent  Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:49.0)
Accept  */*
Accept-Language en-US,en;q=0.5
Accept-Encoding gzip, deflate
origin  http://web.example.com:8080
Referer http://web.example.com:8080/myapp/login
Cookie  authId=...; NTID=...

Ответ

HTTP/1.1 307 Temporary Redirect
https://www.facebook.com/dialog/oauth?client_id=...&scope=public_profile%2Cemail&redirect_uri=http%3A%2F%2Fam.example.com%3A8083%2Fopenam%2Foauth2c%2FOAuthProxy.jsp&response_type=code&state=qtrwtidnwdpbft4ctj2e9mv3mjkifqo

Изменить код:

initiateSocialLogin() {
    var url = "/api/auth/socialauth/initiate";

    fetch(url, { method: 'POST' })
        .then(response => {
            // HTTP 301 response
            // HOW CAN I FOLLOW THE HTTP REDIRECT RESPONSE?
        })
        .catch(function(err) {
            console.info(err + " url: " + url);
        });
}

Как я могу следить за ответом на перенаправление и показывать новый контент в веб-браузере?

Ответ 1

Request.redirect может быть "follow", "error" или "manual".

Если это "следовать", API fetch() следует за ответом перенаправления (HTTP код состояния = 301, 302, 303, 307, 308).

Если это "ошибка", API fetch() обрабатывает ответ перенаправления как ошибка.

Если это "вручную", API fetch() не следует перенаправлению и возвращает непрозрачный-перенаправленный отфильтрованный ответ, который переносит перенаправление Ответ.

Поскольку вы хотите перенаправить после извлечения, просто используйте его как

fetch(url, { method: 'POST', redirect: 'follow'})
    .then(response => {
        // HTTP 301 response
    })
    .catch(function(err) {
        console.info(err + " url: " + url);
    });

Ответ 2

У меня есть аналогичная проблема, и я считаю, что ответ на выбор внутри React такой же, как и для ajax внутри JQuery - если вы можете обнаружить, что ответ является перенаправлением, а затем обновите window.location.href с ответом .url

См. например: Как управлять запросом перенаправления после вызова JQuery Ajax

Обратите внимание, что "если вы можете обнаружить, что ответ является перенаправлением", может оказаться сложной частью. Ответы на выборку могут содержать флаг "перенаправленный" (см. https://developer.mozilla.org/en-US/docs/Web/API/Response), но я обнаружил, что это не так в Chrome. Я также обнаружил, что в Chrome у меня есть ответ на статус 200, а не статус перенаправления, но это может быть что-то с нашей реализацией SSO. Если вы используете fetch polyfill с IE, тогда вам нужно будет проверить, включен ли response.url или нет.

Ответ 3

Взгляните на свойства, перенаправленные с URL- адреса объекта Response: Док говорит, что это

"Экспериментальный. Ожидайте, что поведение изменится в будущем".

Свойство url только для чтения интерфейса Response содержит URL-адрес ответа. Значение свойства url будет окончательным URL, полученным после любых перенаправлений.

В моих экспериментах это свойство 'url' было точно таким же, как значение заголовка Location в Chrome (версия 75.0.3770.100 (официальная сборка) (64-разрядная версия)) сетевой консоли.

Код для переадресации ссылки выглядит так:

   fetch(url, { method: 'POST' })
    .then(response => {
        // HTTP 301 response
        // HOW CAN I FOLLOW THE HTTP REDIRECT RESPONSE?
        if (response.redirected) {
            window.location.href = response.url;
        }
    })
    .catch(function(err) {
        console.info(err + " url: " + url);
    });

Я проверил это, работая со сценарием исходного кода response.js с вызовом AJAX для вызова перенаправлений 302 с сервера.

PS В приложениях SPA ответы на перенаправление маловероятны, возможно, именно поэтому поставщики ajax уделяют мало внимания этой функциональности. Смотрите также эти обсуждения: здесь здесь