axios post 요청시 헤더, 파라미터 안 보내지는 오류

클라이언트 단에서 http 비동기 통신 라이브러리로 axios를 사용했는데, 서버에 요청하는데 자꾸 서버에서 에러가 났다. 

API 요청 형식은 아래와 같다. 

 

• 요청 메소드는 POST 
• 요청 바디는 아무런 데이터도 넣지 않아야함 
• 요청 헤더와 요청 파라메터 값으로만 서버에 요청 

 

 

네트워크 탭에서 확인해보니, 헤더와 파라미터로 잘 요청이가지 않고, payload 바디에 헤더와 파라미터로 적어준 객체가 요청 바디로 보내져서 오류가 나는 것으로 확인이 되었다. 

 

기존 코드 

axios.post(
    'url',
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      params: {
        transactionId,
        email,
        pageUri: 'http://192.168.1.10:5173/email-link-verification',
      },
    },
  );

 

axios 기본 문법

axios(config)

 

요청 config 옵션들

{
  // `url`은 요청에 사용될 서버 URL입니다.
  url: '/user',

  // `method`는 요청을 생성할때 사용되는 메소드입니다.
  method: 'get', // 기본값

  // `url`이 절대값이 아닌 경우 `baseURL`은 URL 앞에 붙습니다.
  // 상대적인 URL을 인스턴스 메서드에 전달하려면 `baseURL`을 설정하는 것은 편리합니다.
  baseURL: 'https://some-domain.com/api',


  // `transformRequest`는 요청 데이터를 서버로 전송하기 전에 변경할 수 있게 해줍니다.
  // 이것은 'PUT', 'POST', 'PATCH', 'DELETE' 메소드에서만 적용됩니다.
  // 마지막 함수는 Buffer, ArrayBuffer, FormData 또는 Stream의 인스턴스 또는 문자열을 반환해야 합니다.
  // 헤더 객체를 수정할 수 있습니다.
  transformRequest: [function (data, headers) {
    // 데이터를 변환하려는 작업 수행

    return data;
  }],

  // `transformResponse`는 응답 데이터가 then/catch로 전달되기 전에 변경할 수 있게 해줍니다.
  transformResponse: [function (data) {
    // 데이터를 변환하려는 작업 수행

    return data;
  }],

  // `headers`는 사용자 지정 헤더입니다.
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params`은 요청과 함께 전송되는 URL 파라미터입니다.
  // 반드시 일반 객체나 URLSearchParams 객체여야 합니다.
  // 참고: null이나 undefined는 URL에 렌더링되지 않습니다.
  params: {
    ID: 12345
  },

  // `paramsSerializer`는 `params`의 시리얼라이즈를 담당하는 옵션 함수입니다.
  // (예: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data`는 요청 바디로 전송될 데이터입니다.  
  // 'PUT', 'POST', 'PATCH', 'DELETE' 메소드에서만 적용 가능합니다.
  // `transformRequest`가 설정되지 않은 경우 다음 타입 중 하나여야 합니다.
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 브라우저 전용: FormData, File, Blob
  // - Node 전용: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // 바디로 전송하는 데이터의 대안 문법
  // POST 메소드
  // 키가 아닌 값만 전송됩니다.
  data: 'Country=Brasil&City=Belo Horizonte',
  ...
  }

 

 

axios 기본 문법 예시

axios를 적어주고 괄호 안 config에 아래와 같은 옵션들을 적어줄 수 있다.

 

axios({
url: 'url', 
method: 'post', 
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
...
})

 

하지만 명령어 메소드를 사용해서 조금 더 간소화 시킬 수 있다. 

 

axios 명령어 메소드 문법 - POST 요청시 

axios.post(url[, data[, config]])

 

axios 다음에 http method를 바로 메서드 형식으로 적어주고, 괄호의 첫 번째 인자를 바로 url 로 적어준다. 

이때 주의할 점은 url 다음에 적어주는 두 번째 인자는 data 속성이 된다는 것이다. headers 나 params 같은 config 옵션 속성값을 적어주고 싶으면, data 옆 세번째 인자에 적어주면 된다. 

 

문제 해결

axios.post(
    'url',
    {}, <--- data 자리에 빈객체 적어줌
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      params: {
        transactionId,
        email,
        pageUri: 'http://192.168.1.10:5173/email-link-verification',
      },
    },
  );

 

 

이제 적어준 params 속성들이 쿼리스트링 파라미터로 요청이 잘 되는 것을 확인할 수 있다. 

 

• https://axios-http.com/kr/docs/api_intro
• https://axios-http.com/kr/docs/req_config
• https://velog.io/@hyes-y-tag/node.js-axios.post-%EC%9A%94%EC%B2%AD%EC%8B%9C-headers-params%EA%B0%80-%EC%95%88%EB%B3%B4%EB%82%B4%EC%A7%84%EB%8B%A4%EB%A9%B4