로컬에서 카카오로그인은 react로 개발하는 401 에러가 발생하고 있어요

REST API
1

문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.

ID 1037645

소스코드

export const getAccessToken = async (authCode) => {
const header = {
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded;charset=utf-8’ }
};

const params = {
    grant_type : 'authorization_code',
    client_id : rest_api_key,
    redirect_uri : redirect_uri,
    code : authCode,
}

console.log(access_token_url);
console.log(params);
console.log(header);

try {
    const res = await axios.post(access_token_url, params, header);
    const accessToken = res.data.access_token;
    console.log(`access = ${accessToken}`);
    return accessToken;
} catch (error) {
    console.error('Error fetching access token:', error);
    throw error; // 에러를 호출자에게 전달
}

}

오류내용 :

OST https://kauth.kakao.com/oauth/token 401 (Unauthorized)

도움부탁드립니다.

2

해결했습니다.
다음과 같이 고쳐서 해결된것 확인했어요.

export const getAccessToken = async (authCode) => {
const header = {
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded;charset=utf-8’ }
};

const params = new URLSearchParams();
params.append('grant_type', 'authorization_code');
params.append('client_id', rest_api_key); // rest_api_key는 정의되어 있어야 함
params.append('redirect_uri', redirect_uri); // redirect_uri는 정의되어 있어야 함
params.append('code', authCode);

try {
    const res = await axios.post(access_token_url, params, header);
    const accessToken = res.data.access_token;
    console.log(`access = ${accessToken}`);
    return accessToken;
} catch (error) {
    console.error('Error fetching access token:', error);
    throw error; // 에러를 호출자에게 전달
}

};

3

네,
카카오 로그인 관련 API 는 OAuth2 표준에 따라 Content-type: application/x-www-form-urlencoded;charset=utf-8 로 호출해야하는데요.

https://datatracker.ietf.org/doc/html/rfc6749#appendix-B

x-www-form-urlencoded 형식은 Body에 쿼리스트링형태의 파라메터를 설정해야합니다.

감사합니다.