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