[Nest.js] Kakao, Google Oauth 로그인 CORS 문제 ㅠㅠ (+ React)

Question

안녕하세요 Nest.js 처음부터 공부하면서 혼자 프로젝트를 진행중인데...

React(5173 port) + Nest.js(3000 port) 로 Oauth를 구현하고있습니다. !

현재  Nest.js 쪽에서 
@Get(/auth/kakao)      
@UseGuard(KakaoGuard)

@Get(/auth/kakao/callback)
@UseGuard(KakaoGuard)

로 요청을 받고있습니다. (Google도 동일)

React에서 button click시에 localhost:3000/auth/kakao 로 api요청을 날리면 301 Found가 뜨게되고 https://accounts.kakao.com/login?continue=~~~~~~~~~~ 로 리디렉션 되지만 CORS 오류가 나옵니다...... ㅠㅠㅠㅠ (구글도 구글 url로 리디렉션)

해당 도메인을 복사하여 브라우저에 직접입력하면 해당 카카오 혹은 구글 로그인 페이지로 접속이 잘되지만... 왜 프론트엔드에선 CORS가 나고있고 어떻게 해결하면 좋을지 모르겠어서 질문 남깁니다 !

추가로 oauth에 등록하는 리디렉션 url은 http://localhost:3000/auth/kakao/callback 이며, 
카카오 웹 플랫폼, 구글 자바스크립트 원본은 http://localhost:5173 입니다 !

이양일 · Accepted Answer

안녕하세요!

제가 react 에 대한 식견은 부족합니다만,
혹시 문제를 해결하시는데 힌트가 될수 있을까 싶어 글을 남겨 봅니다.

일단 발생하고 있는 CORS 에러에 대한 개념을 파악하시면 좋겠습니다.

CORS 는 한 출처(protocol + host + port)에서 실행중인 웹 어플리케이션이 다른 출처의 자원(resource)에 접근할 수 있도록 브라우저에 알려주는 체제이며,
접근할 수 없는 출처(protocol + host + port)일 경우 CORS 에러가 발생하게 됩니다.

즉, 경험하고 계신 CORS 이슈는 localhost:3000 출처에서 실행한 웹 어플리케이션에서 접근 권한이 없는 https://accounts.kakao.com 의 리소스에 접근하려고 했기 때문에 발생한 겁니다.

구현하신 react 컴포넌트에서 api 요청을 통해 301 응답을 받았을 때 리다이렉트 할 경로로 api 요청을 다시 하는게 아니라
페이지 리다이렉트를 하는 방향으로 수정하시면 이슈가 해결되지 않을까 생각됩니다.

저의 짧은 지식이 부디 조금이나마 도움이 되시길 바랍니다.

이도경 · Answer

링크 이동을 어떻게 하셨나요? 
라우터같은 함수 쓰지않고 window.href로 해결했던 경험이 있어요