Request hostname 과 Redirect hostname 이 동일 해야 합니다.

즉, React 에서 localhost:3000 에서 localhost:3000/token 으로 넘겨 주는 방식으로 구현을 했어야 했습니다.

• REST-API 활용한 카카오 소셜 로그인 구현(feat. React)
• Kakao Rest API "Redirect URI mismatch." 에러 처리하기

// Router 코드

/ 경로에서 a href=’oauth/authorize’ 를 통해서 로그인 창을 열고 로그인을 실행하면 Redirect URI 로 지정된 /signin 으로 302 Redirect 가 되게 됩니다.

queryString 으로 나온 ?code=토큰값 을 추출해서 다음의 axios 코드를 실행

• code 는 인가 코드로 알 수 없는 문자열 줌…

await axios.post("<http://kauth.kakao.com/oauth/token>", {
   grant_type: "authorization_code",
   client_id: "[앱키]-RESTful API",
   redirect_uri: "localhost:3000/signin", // 리액트 주소
   code: `${code}`
}, {
   headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
   }
});

위 단계를 진행했을 때 다음과 같은 에러가 발생

data: error: "invalid_client" error_code: "KOE010" error_description: "Bad client credentials"

data:

error: "invalid_client" error_code: "KOE010" error_description: "Bad client credentials"