개발자

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

2023년 10월 15일조회 1,141

안녕하세요 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 입니다 !

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

인기 답변

이양일님의 프로필 사진

안녕하세요! 제가 react 에 대한 식견은 부족합니다만, 혹시 문제를 해결하시는데 힌트가 될수 있을까 싶어 글을 남겨 봅니다. 일단 발생하고 있는 CORS 에러에 대한 개념을 파악하시면 좋겠습니다. CORS 는 한 출처(protocol + host + port)에서 실행중인 웹 어플리케이션이 다른 출처의 자원(resource)에 접근할 수 있도록 브라우저에 알려주는 체제이며, 접근할 수 없는 출처(protocol + host + port)일 경우 CORS 에러가 발생하게 됩니다. 즉, 경험하고 계신 CORS 이슈는 'localhost:3000' 출처에서 실행한 웹 어플리케이션에서 접근 권한이 없는 'https://accounts.kakao.com' 의 리소스에 접근하려고 했기 때문에 발생한 겁니다. 구현하신 react 컴포넌트에서 api 요청을 통해 301 응답을 받았을 때 리다이렉트 할 경로로 api 요청을 다시 하는게 아니라 페이지 리다이렉트를 하는 방향으로 수정하시면 이슈가 해결되지 않을까 생각됩니다. 저의 짧은 지식이 부디 조금이나마 도움이 되시길 바랍니다.

이도경님의 프로필 사진

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

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!