[node.js] axios.post 요청시 headers, params가 안보내진다면?

소셜 로그인(kakao) 구현 코드를 보던 중

axios
  .post(`${url}?grant_type=${grantType} ... `, 
           { 
  			headers: {
                  "Content-type": "...",
                }
});

저 axios 첫번째 인자의 길이가 생각보다 길어서 수정을 했는데 거기서 또 오류를 맞이했다.

1작성 1오류,,?

🧐 axios가 뭐지?

axios는 Javascript로 API 통신을 한다 하면 대표적으로 등장하는
promise기반 HTTP 클라이언트 이다.

참고 문서: Axios Docs

리액트에 대해 아무것도 모르는 채로 프로젝트에 적용해야 했었을 때가 있었는데 그때 폭풍 검색으로 처음 접한 axios

이제는 API 통신이 필수인 시대여서 js로 진행하는 프로젝트시 도움을 많이 받고 있다.

😵 문제가 무엇인가..

무튼 문제가 무엇이냐

일단 axios의 기본 사용방법은 아래와 같고

axios({ method, url[, data , ... ]})
// 혹은
axios.post(url[, data, config, ...])

axios로 카카오와 통신하는 코드를 작성했고
그 코드는 아래와 같았는데

axios
  .post(url + '엄청 긴 params', { header });

아래 코드 형식으로 수정을 했더니

axios.post(url, { header, params });

에러가 나는것이었다! 😵

header와 params를 같이 넣는 것은 문제가 아니었고 분명 고치기 전에는 잘 동작을 하는 코드였다.

python으로 kakao 로그인 구현했을 때도 같은 형식으로 넣어서 보냈기 때문에 params를 data로도 해보고 json형식으로도 해보고 삽질을 좀 하다가 검색을 해보니...

👏 axios의 두번째 인자에 {} 혹은 null을 넣어주면 해결이 된다!

바로 해결이 됩니다.

// 최종 수정 코드
axios.post(url, {}, { headers: ~, params: {}});

일단

params는 객체 혹은 URLSearchParams 객체여야 한다

는 것이 공식 문서에 나와있기 때문에 json으로 바꿨던 삽질은 잘못된 방식이었고

왜!!!
쿼리 파라미터가 포함된 url로 요청을 보낼 땐
두번째 위치에 header가 있어도 제대로 동작하다가
params를 나누면 빈 객체를 넣으라는 건지 모르겠다.

합리적 의심은

※ 지극히 주관적인 생각입니다.
※ 혹시 아시는 분이 계시다면 말씀해주세요 ㅠ.ㅠ

전자는 url에서 원하는 파라미터를 다 찾았기 때문에 OK
후자는 url에서 원하는 파라미터가 없어서 config(세번째 인자)로 갔는데 세 번째 인자가 없어서 Failed

이지만 내 생각이라서,,ㅋ ㅋ ㅋ

아무튼 결론!

axios.post로 요청 보낼 때 잘 작성한것 같은데 오류가 난다면?
두 번째 인자에 빈 객체 혹은 null을 한 번 넣어서 보내보자!

그래도 안되면 다른 부분에서 문제가 있는걸로,,

이유는 다시 열심히 찾아보고 알게 된다면 수정하겠습니다😥

출처:
같은 문제를 겪으신 선생님의 글 https://okky.kr/article/620647
Axios 공식문서 https://axios-http.com/kr/docs/post_example

늘 감사합니다,, 글을 써주시는 모든 분들 😍