개발자
[Nest.js] Kakao, Google Oauth 로그인 CORS 문제 ㅠㅠ (+ React)
안녕하세요 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 요청을 다시 하는게 아니라 페이지 리다이렉트를 하는 방향으로 수정하시면 이슈가 해결되지 않을까 생각됩니다. 저의 짧은 지식이 부디 조금이나마 도움이 되시길 바랍니다.
링크 이동을 어떻게 하셨나요? 라우터같은 함수 쓰지않고 window.href로 해결했던 경험이 있어요
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 10월 15일
CORS(Cross-Origin Resource Sharing) 오류는 브라우저가 보안상의 이유로 동일 출처 정책을 기본으로 설정하기 때문에 발생합니다. 이렇게 하면 현재 웹 페이지가 로드된 동일한 출처에서만 리소스를 로드할 수 있습니다. Nest.js에서 CORS를 해결하려면 다음과 같은 방법을 사용할 수 있습니다: 1) Nest.js의 main.ts 파일에서 다음 코드를 추가합니다: ```javascript app.enableCors(); ``` 2) 만약 특정 세부 설정이 필요하다면 아래와 같이 cors 옵션을 추가할 수 있습니다: ```javascript app.enableCors({ origin: 'http://localhost:5173', methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', credentials: true, }); ``` 여기서 `origin`은 프론트엔드 서버 주소입니다. 그러나 문제가 계속되면 클라이언트 측에서 요청을 보내는 방식을 변경해 볼 수 있습니다. React 앱에서 Oauth URL로 직접 리다이렉트하는 대신 서버에 인증 요청을 전송하고 서버가 클라이언트를 Oauth URL로 리다이렉트하도록 하는 것입니다. 참고로 CORS 오류는 브라우저의 보안 정책 때문에 발생하는 것으로, 복사해서 브라우저에 URL을 붙여넣어서 접속하면 문제가 없는 이유도 브라우저가 이때는 동일 출처 정책을 적용하지 않기 때문입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!