Node express에서 REST API로 토큰 받기를 하려고 합니다. 응답 받을 경우 data 부분 텍스트가 깨집니다

로컬 서버 환경 localhost:3300
OS 는 Mac 입니다.
앱ID는 811618 입니다.

nodejs express에서 REST API로 토큰 받기를 하려고 합니다.
백엔드에서 아래와 같이 token을 받아서 토큰 정보를 확인 하려는데
응답시에 data 영역이 아래와 같이 깨져서 나옵니다.

app.get("/api/kakao/code", async (req, res) => {
    const code = req.query.code;
    console.log("--- 인가코드 ---");
    console.log(code);
    const date = new Date();

    const uri = "https://kauth.kakao.com/oauth/token";
    const body = qs.stringify({
        grant_type: "authorization_code",
        client_id: "{client_id}",
        redirect_uri: "http://localhost:3300/api/kakao/code",
        code: req.query.code,
    });
    const headers = {
        "Content-Type": "application/x-www-form-urlencoded",
    };
    const response = await axios
        .post(uri, body, headers)
        .then((res) => {
            console.log(res); // res.data를 제외한 res는 정상적으로 출력
            console.log(res.status); // 200
            console.log(res.data); // 깨진 텍스트 출력
        })
        .catch((error) => {
            console.log(error);
        });
    console.log("response " + response); // undefined 출력
});

------------ 응답 깨지는 data 부분 ---------

data: "\x1F�\b\x00\x00\x00\x00\x00\x04\x03]�ٲ�6\x10�_e��9)#�\x0F�\x0E0�,\x02��f�q�#@��P*�\x1E��L�\x1Aݴ��������\\�i�����7y��cU���\x0F\x13�8�GBُW[̪G!�\x1F�O��\x0B\x0BE鐧�g8���d>[~���\x0Bq�/C�8I\x1EO�ĪS^L�\\�'���<\x1C�%)��Sߘ��43NQv���Lj3ژV��\x17\x01�P8���/�\x14�'�bC�j���\\E��cw\n" +
    'A(@pZ"�q��\x1A�L\x12�\x1A�Us�\x072�1�+w��W��~Ͻ\x0B58\x07���\f\\e��\x17\x06��n��߷\x11�\x01�!��\x0Bp}�w�E`�w�+�H5f�s�\x10\x1B[�\r��R\n' +
    '���]�%�\x05�>��C�_�[k��\x1B\n' +
    'Qɳ8\x1B�����H��\x0E\n' +
    'u����������\x14��#\x04���/�����P}q�=���N\f4��k�6?��~�L\x7F�L5�\x10��E���R�z/��m�\x1D�K��Ԗ��"M6�WL�\x19���&B��R�`�fmu\x0F\x17\tg\x07�@f�:ȧ��9����P�\\֯\x04��^\x1Dm��t@�ֶA{�8�\r���H{�dxE\x0B{�AF�O�P[wU|m/�y|x�:��\r}t��00m���Q.��nM] %\t�O��x��\x1E��M�d�\x1F\r%�:��\x1Bt\x19��6�}Z���ӂ�\x14ʴ\x07Ap,�0����\x12Ŏ/\x16��\'0�6$�l\x1FG�z\\��du��u�؇\x01\x17��ӕ�ܷ�H?��K��\x1Ayi�\x19t�w����y�y�*3=gt\x1C}�f�Z� \x0BgY���\x14ƃ\x11�\x11���U,V���G\rh+��B�6�G��7.\x06>0ֳ^\r�b����\x1E��Q핗\x1E>S)�]��f�W<�l�fWrZG�3q�Ft���QW\x066�9$\x7F\x0F��톙�\x01\'H�o�9��\f9L}����I\\��X��ٷ��\x0E�M\x17��W���\x0F\x148��$鯿\x01��\'4\x04\x00\x00'

추가적으로 응답시에 넘어오는 정보도 일부 올려드립니다.

 headers: AxiosHeaders {
    date: 'Thu, 24 Nov 2022 19:39:29 GMT',
    'content-type': 'application/json;charset=utf-8',
    'transfer-encoding': 'chunked',
    connection: 'close',
    'cache-control': 'no-cache, no-store, max-age=0, must-revalidate',
    pragma: 'no-cache',
    expires: '0',
    'x-xss-protection': '1; mode=block',
    'x-frame-options': 'DENY',
    'x-content-type-options': 'nosniff',
    kakao: 'Talk',
    'access-control-allow-origin': '*',
    'access-control-allow-methods': 'GET, POST, OPTIONS',
    'access-control-allow-headers': 'Authorization, KA, Origin, X-Requested-With, Content-Type, Accept'
  },
headers: AxiosHeaders {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': 'application/x-www-form-urlencoded',
      'User-Agent': 'axios/1.2.0',
      'Content-Length': '228',
      'Accept-Encoding': 'gzip, deflate, br'
    },
    'Content-Type': 'application/x-www-form-urlencoded',
    method: 'post',
    url: 'https://kauth.kakao.com/oauth/token',

추가적으로 KOE320에러의 data는 잘 나옵니다.


    data: {
      error: 'invalid_grant',
      error_description: 'authorization code not found for code={에러코드}',
      error_code: 'KOE320'
    }

안녕하세요.

axiosv responseEncodig 설정을 변경하셨나요?
그렇지 않으시다면 서비스측 콘솔에서 한글을 표시 못하시는것 같습니다.

그리고 요청헤더는 Content-type: application/x-www-form-urlencoded;charset=utf-8 으로 부탁드립니다.

1개의 좋아요

바쁘신 와중에도 답변 감사합니다.ㅠㅠ
먼저 요청헤더는 말씀 해주신대로
Content-type: application/x-www-form-urlencoded;charset=utf-8 세팅을 했고
responseEncoding 설정은 utf8을 했는데 동일한 현상이 나오네요

x-www-form-urlencoded 타입의 post 요청을 파싱을 위해
app.use(express.urlencoded({ extended: true })); 설정도 하고

프론트, 백 둘다 node버전 v16.16.0 버전이고
서비스측 콘솔에서 한글을 표시 못하는 부분은 토큰 정보를 받아오는 것이라
한글 표시와는 무관한 것으로 보여집니다.
그래서 프론트(React)에서 동일한 로직으로 axios를 통해 통신할 때는 토큰 데이터가 정상적으로 나오고 있고 같은
백엔드Node express에서는 여전히 에러메시지정상적으로 data가 출력이 되는데
정상적으로 데이터를 받으면 동일하게 텍스트가 깨져서 나옵니다.

1개의 좋아요

죄송합니다 본문을 잘못 이해했습니다.

node에서 node-fetch 를 사용하거나(추천) Accept-Encoding 에 deflate, br 정도만 설정해서 요청하시면 좋을것 같습니다.

// 예
const config = {
  headers: {
    "Accept-Encoding": "deflate, br",
    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
  }
}

nodejs에서 axios 사용시 압축된 응답의 경우 (ex, gzip, deflate, br) decompress 가 잘 동작하지 않는것으로 알고 있습니다.

1개의 좋아요

아!! 정말로 감사합니다 ㅜㅜ
헤더의 Accept-Encoding 설정의 문제였네요

"Accept-Encoding": "deflate, br",

위의 설정하니 잘됩니다!