시도 1

프론트에서 인가코드를 받아오고, 백엔드에서 인가코드를 통해 토큰을 받아오고, 또 다시 토큰으로 유저정보를 받아오는 것까지는 성공했다. (5번까지)

이후 회원가입 or 로그인 처리, 토큰 발급까지 성공, 발급한 토큰을 프론트에 응답 데이터로 전송했다. (6~7번) (응답 직전 보내는 값 정상 출력되는 부분 확인)

그런데 프론트에서 응답값을 수신하지 못함.

redirect uri mismatch 라는 오류가 계속해서 발생했다. (이 때 카카오 앱키는 FE에서 등록한 앱키를 FE/BE 동일하게 사용하고 있었고, redirect uri 는 BE api url로 /api/auth/kakao/callback 을 사용했다. FE 측에서 redirect url에 해당 url 등록해 둔 상태)

<aside> 💡 가정 redirect uri 주소가 BE의 주소로 되어 있다면 백-카카오 간의 요청을 주고 받는 과정에서 FE와의 연결이 끊어지는 결과가 되는 것이 아닐까? 그래서 토큰을 응답하더라도 FE에서 받을 수가 없는 것이 아닐까?

</aside>

시도 2

카카오에서 등록하는 redirect url에 대한 설정을 FE에서 사용하는 주소로 맞춰보았다.

그러나 여전히 해결되지 않았다.

<aside> 💡 가정 axios 요청을 연속으로 2번 다 진행하지 않고 따로따로 진행해보면 어떨까?

</aside>

시도 3 (성공)

• 방법을 바꾸어 카카오로의 요청을 한 번에 다 하는 것이 아니라 나누어서 진행해보고자 하였다.
  • BE : 인가코드를 통해 카카오에서 토큰을 받은 후, 토큰을 바로 FE로 전달
  • FE : 토큰을 다시 BE으로 전달
  • BE : 다시 전달받은 토큰으로 카카오에 요청하여 유저정보를 받아와서 회원가입/로그인 로직 수행, 토큰 발급하여 FE로 응답
• 결과 : FE에서 토큰(BE에서 발급한 토큰)을 받는 것에 성공했다.