[Week2 Day5] Auth 트러블 슈팅: Axios CORS

Issue

로그인 시도 시 CORS 오류가 발생하여 로그인 불능 상태가 됨.

Problem

• 경고창 오류를 살펴보니 XMLHttpRequest가 반려되었다는 메세지를 확인함.

  

• 사용자가 직접 해당 링크에 접근하면 OAuth 로그인이 가능한 것을 확인함.

• 오류를 추적해보니 axios가 Redirection을 받으면 해당 주소로 다시 Request를 보내며, 그렇게 axios가 보낸 Request를 Github에서 거부하여 발생한 오류였다.

• axios가 Redirect 응답을 받았을 때 재요청을 하지 않도록 maxRedirects 옵션을 걸어보았지만, 브라우저에서는 해당 옵션을 사용할 수 없었음.

• passport-github에서 OAuth 시작을 위해 리다이렉션 응답을 보낼 때, 응답 유형을 변경해보려 했지만 그러한 옵션이 없어 실패함.

• axios에 대해 intercept를 활용해보려 했지만, 다른 좋은 방법이 있을까 하여 보류함.

• 다만 현재 상황에서는 로그인만 가능하다면 로그인한 사용자가 재로그인하는 경우를 방지하기만 하면 되었기에, 백엔드 영역에서 그러한 사용자가 접근할 경우 강제로 다른 페이지로 리다이렉트하도록 코드를 수정하고, 프론트 영역에서는 axios 대신에 <a> 태그를 이용하여 로그인을 시도하는 것으로 변경하기로 합의함.

Solution

• FE: axios를 사용하여 접근 주소를 받아오는 대신에, a 태그로 로그인 시도.
• BE: 기본의 로그인 사용자를 거부하는 Guard를 변경하여 400 대신 메인 페이지로 리다이렉션하도록 수정하였고, 따라서 로그인 사용자가 재로그인을 시도하면 해당 Guard로 차단하도록 수정함.

What I Learnd

• axios가 브라우저에서 사용할 때 리다이렉션 요청을 받으면 받은 주소로 다시 요청을 보낸다. (maxRedirects 옵션이 무효화된다.)
• axios의 intercept의 존재
• Guard에서도 Response 객체로 Redirect 요청을 보내어 Redirection을 요구할 수 있음.