인프런 커뮤니티 질문&답변

이번 예제와 같이 로그인 페이지에서 HTML Form을 제출하도록 구현해보고 (잘 작동하였습니다), 앞의 예제와 같이 `axios.post`를 사용하여 POST 요청을 보내도록 구현도 해 보았는데, 후자의 경우 페이지가 리다이렉트 되지 않아서 원인을 알아보았습니다. (아래에 있습니다.)

혹시 현업에서는 이런 부분을 어떤 식으로 구현하나요? 구체적으로

1. 클라이언트에서 로그인 기능을 AJAX로도 구현하는지 궁금합니다.

2. 만일 AJAX로도 구현한다면 서버의 응답을 어떻게 처리하는지 궁금합니다.

• 서버의 응답 코드를 302로 하고 클라이언트의 axios에서는 302를 확인하려 했으나, 응답 코드 302가 확인이 안 되고, 리다이렉트된 주소의 응답이 결과값으로 반환됩니다.
• 그래서 응답에 문제가 없으면 `window.location`을 조정하여 브라우저를 리다이렉트하는 식으로 해결하였으나, 결과적으로 주소를 2번 요청하는 것도 조금 걸립니다.

=====

아래는 원인을 알아본 내용입니다. 타인에게 참고가 될까 싶어 첨부하였습니다.

서버에서 상태 코드가 302인 HTTP 응답을 보냈을 때,

클라이언트가 폼을 제출한 브라우저일 때는 브라우저가 응답을 받고 웹 페이지를 리다이렉션을 해주는 반면,

클라이언트가 Axios로부터 POST 요청을 보낸 경우였다면 리다이렉션 되는 것은 웹 페이지가 아닌 AJAX 요청입니다. 따라서 웹 페이지는 `/login`에 머물러 있고, AJAX 요청은 `/`로 리다이렉트되어서 응답 코드 200의 응답을 받고 이것이 `axios.post`의 결과로 반환됩니다.

참고한 자료: https://github.com/axios/axios/issues/396#issuecomment-395592900

(axios 문서 같은 곳에서는 관련 내용을 찾을 수 없어서 출처가 조금 빈약합니다. 혹시 틀린 내용이 있을 경우 지적해주시면 수정하겠습니다.)