[OAuth2] 카카오 로그인 백엔드, 프론트엔드

들어가며

Tweaver 기능 중에는 OAuth2 기반의 소셜로그인 기능이 있다. 본 프로젝트에 해당 기능을 넣게된 계기와 마주한 상황, 그리고 어떻게 해결했는지를 기록하려 한다.

---

문제점

원래 다르게 썼었는데 이 글을 수정해서 https://eod940.tistory.com/53 이 링크의 글로 만드려다가 기록이 유실되었다. ㅠㅠ 부끄러운 기록이어도 그냥 냅두자!

...

처음에는 SecurityConfig에서 CorsConfiguration 설정을 전체 허용으로 바꿔주었다. 하지만 동일하게 문제가 발생했다. 그래서 나는 프론트의 kakao login을 담당하는 코드를 분석해봤다.

https://devtalk.kakao.com/t/rest-api-cors/114424 글을 참조했다. 비동기 방식으로 호출하면 안된다고 하니 await를 빼고 정적 요청으로 호출했다. 결과는 안좋았다.

[Rest API 로 로그인 구현 시 CORS 문제

rest API 로 로그인을 구현 중인데요. 아래와 같이 요청을 보내고 있습니다. `axios.get('https://kauth.kakao.com/oauth/authorize', { params: { client_id: process.env.REACT_APP_REST_API_KEY as string, redirect_uri: 'http://localhost:808

devtalk.kakao.com](https://devtalk.kakao.com/t/rest-api-cors/114424)

---

최종 결과

결과적으로 kakao의 Redirect URI를 http://localhost:5173/oauth2... 에서 http://localhost:5173/api/oauth2... 로 변경하니 의도한 결과가 나왔다. 프론트에서 설정한 vite proxy에서 API 요청을 자동으로 /api/ 를 넣는데, 백엔드에서 이를 반영하지 않았기 때문에 일어난 일이었다.

다방면으로 공부 많이 해야겠다