#2. OAuth2 구현시 CORS 에러

프로젝트 진행시 인증 부분을 담당했었는데,
그 중 Google의 OAuth2 기능을 구현하고자 했다.
이 과정에서 2차례 마주쳤었던 CORS 에러에 대해 정리를 하고자 한다.

1. 최초 Google OAuth2 로 로그인 할 때,

위의 순서상 #1. 에서 [사용자]가 Google 로그인 링크가 있는 버튼을 클릭할 경우,
#2. FE 측에서는 BE 서버의 Login URL로 GET 요청을 보내고,
#3. BE 서버에서는 그 GET 요청의 응답으로
Google 로그인 페이지 + 인증 성공 시 '인증 코드'를 전달받을 Redirect URL을 보내게 되어 있다.

그래서 BE서버 입장에서
자신의 서버로 요청을 보낼 FE의 URL을 허가된 URL이라는 의미로
Google OAuth2 설정 페이지에서 [승인된 자바스크립트 Origin] 이라는 카테고리에
BE 서버의 Login URL로 GET 요청을 보낼 FE 측의 URL을 Origin 으로 등록해야 한다.

[원인]
하지만 개발 당시, 최초 BE OAuth2에서 구글 Console에 계정을 등록할 때,
[승인된 자바스크립트 Origin] 이라는 카테고리에 FE의 Origin은 등록을 누락하여
실제 FE에서 BE 서버 URL로 GET 요청을 보낼 때 CORS 오류가 발생했다.

[당시 해결 방법]
지금은 당시의 CORS 원인을 파악하고 있지만, 개발할 때는 왜그런지 해결법을 알지 못한 상태였고,
사용자가 로그인 링크를 클릭했을 때, FE에서 BE 서버의 URL로 GET 요청을 보내는 것이 아닌,
BE 서버의 URL에 GET 요청을 보내는 URL을 윈도우 로케이션 (/Href) 방식으로 BE측으로 전달해서
GET요청을 보내는 입장이 BE서버 그 자체가 되도록 전달하여 해결했다.

[원천적인 해결 방법]
OAuth2 Console을 설정할 때, [승인된 자바스크립트 원본] 카테고리에 FE의 URL을 등록하기

 

2. JWT - Refresh 토큰 만료 시, 재 인증 안내

JWT 토큰의 종류 중 AccessToken, RefreshToken 2가지가 있는데,
RefreshToken이 만료될 경우, BE 서버에서 [구글 로그인 URL]을 FE에서 전달하도록 하였으나,
실제 전달된 페이지의 접근에 CORS 에러가 발생했다.

[원인]
특정 리소스에 접근할 때 전달된 Request에 포함된 JWT - AccessToken, RefreshToken을 검토하여
RefreshToken이 만료되었음을 확인하는 것은
BE서버 입장에서는 Request를 전달받는 것이고 해당 Request의 Origin은 FE이다.

하지만 토큰이 만료되었을 때 BE 서버에서 '로그인 페이지'를 전달하면
[인증 서버]의 입장에서는 로그인 페이지의 Origin은 BE서버이고, 최초 Request의 Origin은 FE이다.
즉, Origin의 불일치 이슈가 발생되어 CORS 에러가 발생한다.

[해결]
Request에 담긴 JWT-RefreshToken이 만료되었음을 확인했다면,
BE서버에서는 '구글 로그인 페이지'를 리턴하는 것이 아니라 특정 예외 코드를 반환하고,
FE측에서 해당 특정 예외 코드를 확인하면, '구글 로그인 페이지'를 반환하도록 해결.

 

[2차례의 CORS 해결 결론]

BE 서버에서는 주로 응답의 역할인데,
이 응답을 보낼 때 그 대상인 Request의 Origin이 어딘지 확실히 알아야 함을 느꼈다.