프론트에서 인가코드를 백엔드로 넘겨주었을 때 인가코드 만료(?) 문의

안녕하세요. 워낙 문서도 잘 작성해주셨고, Dev Talk에서도 궁금한 점들을 많이 찾아볼 수 있었습니다.
그러나 계속해서 찾아 보았음에도 불구하고 문제를 해결할 수 없어서, 직접 문의를 드립니다.
프론트는 TypeScript를 사용하였고, 서버는 Spring를 사용했습니다.

현재 로직은 아래와 같습니다.

  1. 프론트에서 카카오계정 주소를 통해 인가코드를 가져옵니다.
    여기서 redirect_uri는 프론트(localhost:3000)로 설정하였습니다.
  2. 프론트로 redirect 되면, url에서 code를 파싱하여 서버의 API를 호출합니다.
  3. 서버는 인가코드를 받아 Access Token을 발급 받고, 카카오 API를 통해 사용자의 정보를 DB에 저장합니다.
  4. 저장 이후, 프론트에서 필요한 uid 값을 리턴합니다.

위 로직을 수행하면 서버 콘솔에서 https://kauth.kakao.com/oauth/token 400 에러가 발생합니다.
아무래도 프론트에서 받은 인가코드를 사용하여 Access Token을 발급받지 못하는 에러인 것 같습니다.

위 로직에서 1번의 redicert_uri를 서버(localhost:8080)로 설정하여 직접 인가코드를 받으면 에러가 발생하지 않고 정상적으로 굴러갑니다.

어디서 오류가 발생하는 지 모르겠습니다…

현재 프론트에서 API로 호출하고 있는 코드는 아래와 같습니다.
1번의 로직에서 redicert_uri를 아래 API로 지정하면 문제 없이 작동합니다.

@GetMapping("/oauth/redirect/kakao")
  public ResponseEntity<?> kakaoCallback(@RequestParam("code") String code) throws Exception {
        String access_Token = kakaoLoginService.getKaKaoAccessToken(code); // 여기서 400 발생
        User user = kakaoLoginService.createKakaoUser(access_Token); // 여기서 401 발생

        if(user.isSignUp()) { // user = null이라 에러 발생
            final UserDetails userDetails = userDetailService.loadUserByUsername(user.getEmail());
            final String token = jwtUtils.createToken(userDetails.getUsername(), user.getRoles());
            return ResponseEntity.ok(new AuthenticationResponse(token, user.getRoles(), user.getUserId()));
        }

        return ResponseEntity.ok(user.getUserId());
    }

앱 ID는 878739 입니다.
혹시나 서버의 redicert_uri를 사용하여 인가코드를 발급받고, 콜백 함수를 호출하는 API가 필요하시다면
연락처(이메일 등)를 알려시면 해당 메일로 발송 후 답글 드리겠습니다.
현재 테스트를 위해 개인 로컬에서 돌리고 있는 상황이라 양해 부탁드립니다.

400이 발생한 https://kauth.kakao.com/oauth/token 를 확인해보니 KOE010가 뜨네요.

https://devtalk.kakao.com/t/koe010-bad-client-credentials/115388
해당 게시글 확인했습니다!
프론트 측에 전달하여 시도해본 후, 말씀드리겠습니다!