[38] 트러블 슈팅 : 카카오로그인

※ 오늘 발생한 문제 : 카카오 회원가입이 되지 않고, redirect 되지 않는 문제

 

BE 코드 수정 부분

redirect_uri 주소가 localhost:8080으로 시작되는 백엔드 사용 로컬테스트 서버로 되어있었는데 (주석처리 된 부분), 그 부분을 프론트엔드 사용 로컬테스트 서버인 localhost:3000번으로 변경해 주었다.

 

 

FE 코드 수정 부분

 

 

문제가 발생했을 때 위의 사진과 같이 instance.post(`auth/kakao/callbak`,code)로 잘못 작성되어 있었다.

 

 

위와 같이 post('auth/kakao/callbak',code) -> get(`auth/kakao/callback?code=${code}`) 로 수정

 

 

그리고 원래 REACT_APP_BASE_URL에 백엔드에서 배포한 서버주소가 들어가 있었는데, 그 부분에 프론트엔드에서 사용하는 로컬테스트 서버인 localhost:3000을 넣고, REACT_APP_API_URL 부분에 백엔드 배포 서버를 넣어주니 정상 작동 되었다.

 

 

---

[ 참고 자료 ]

https://data-jj.tistory.com/53

REST-API 활용한 카카오 소셜 로그인 구현(feat. React)