JavaScript Fetch API를 사용하여 로그인 후 리디렉션을 처리하는 방법은 무엇입니까?

JavaScript Fetch API를 사용하여 로그인 후 사용자를 다른 페이지로 리디렉션하는 방법은 무엇입니까?

fetch() 함수를 사용하여 응답하는 서버에 POST 요청을 수행하는 경우 RedirectResponse를 사용하면 클라이언트 측에서 리디렉션이 자동으로 수행됩니다. 이는 fetch() 함수에서 리다이렉트 모드가 기본적으로 따르도록 설정되어 있기 때문이다. 결과적으로 사용자는 새 URL로 리디렉션되지 않고 오히려 fetch()가 뒤에서 해당 리디렉션을 따르고 리디렉션 URL의 응답을 반환합니다.

이를 극복하려면 다음을 확인할 수 있습니다. 응답은 리디렉션된 요청의 결과입니다. 그렇다면 리디렉션 후 **얻은 최종 URL을 반환하는 응답의 url 속성을 검색할 수 있으며 JavaScript의 window.location.href를 사용하여 사용자를 대상 URL(예: 페이지 리디렉션). window.location.href 대신 window.location.replace()를 사용할 수도 있습니다. href 속성 값을 설정하는 것과 다른 점은 location.replace() 메서드를 사용할 때 지정된 URL로 이동한 후 현재 페이지가 세션 기록에 저장되지 않는다는 것입니다. 즉, 사용자가 이전 페이지를 사용할 수 없다는 의미입니다. 버튼을 눌러 탐색하세요.

예제 코드:

<code class="javascript">document.getElementById("myForm").addEventListener("submit", function (e) {
  e.preventDefault(); // Cancel the default action
  var formElement = document.getElementById("myForm");
  var data = new FormData(formElement);
  fetch("http://my-server/login", {
    method: "POST",
    redirect: "follow", // Change it to "manual" if you want to handle redirects manually
    body: data,
  })
    .then((res) => {
      if (res.redirected) {
        window.location.href = res.url; // or, location.replace(res.url);
        return;
      } else {
        return res.text();
      }
    })
    .then((data) => {
      document.getElementById("response").innerHTML = data;
    })
    .catch((error) => {
      console.error(error);
    });
});</code>

참고: 교차 출처 요청을 사용하는 경우 Location 헤더를 포함하려면 서버 측에서 Access-Control-Expose-Headers 응답 헤더를 설정해야 합니다. 이는 기본적으로 CORS 허용 목록에 포함된 응답 헤더만 노출되기 때문입니다.

위 내용은 JavaScript Fetch API를 사용하여 로그인 후 리디렉션을 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!