구글 로그인 개발 중 계속해서 302 응답 코드를 받았는데 CORS 에러를 맞닥뜨렸다.
코드 로직
일단 로직은 다음과 같다.
사용자 -> 서버 -> 구글
1. 사용자가 구글로그인을 클릭하면, 서버에 요청을 보낸다.
2. 서버에서 구글로 요청을 보내고
3. 구글 로그인이 성공하면, 서버에서 설정한 url로 (accessToken과 refresh token 이 들어있는 url) redirect된다.
4. query string을 읽어와서 accessToken과 refresh token을 가져오면 됨.
문제
서버에 API 호출을 하고 나서, redirect할 때, error가 발생!
아예 redirect url을 못 받아 오는 것인가 했는데, url은 받아옴..
찾아보니,, 구글은 CORS를 지원해주지 않는다라고 나와있다..참고
해결
axios로 로그인 페이지를 요청하면 안되고, form이나 href를 사용해서 요청해야 한다.
axios를 사용하면 json으로 data를 받을 수 있는데, 나는 어짜피 쿼리 스트링으로 토큰을 받아오기 때문에 상관없다.
<a href={`${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorization/google?redirect_uri=https://localhost:3000/login&mode=login`} >