axios params 전송할 때 url에[] 빼고 보내기

😥 문제

axios GET을 이용해서 api를 받아오는 평범한 개발을 하던 중

const params = {
  userIds: [1, 2],
  name: 'Jae',
};

const url = [ 백엔드 통신 api url ]

...

const resp = await axios.get(url, { params });

url?userIds[]=1&userIds[]=2&name=Jae

400 error 와 함께 url이 위의 형태로 전달되는 문제에 직면했다

알아보니, 배열을 파라미터로 전송해서 나타나는 문제였다

---

💡 해결방법

✅ 백엔드 part

스프링을 사용해서 개발을 하는 경우 ...

controller에 @RequestParam("key[]") 와 같은 형태로 지정을 해 주어야 데이터를 정상적으로 받을 수 있다고 한다

하지만 매번 백엔드 개발자에게 요청드리기 어렵다 ㅠㅠ

✅ 프론트엔드 part

axios 에서 제공하는 인터페이스인 paramsSerializer 를 통해 배열 직렬화를 추가할 수 있다❗

1. qs stringifying library 이용하기

개발 중인 프로젝트에 qs 라이브러리를 설치한 후, 다음의 옵션을 추가해준다

import qs from "qs";


const resp = await axios.get(url, { 
  params,
  paramsSerializer: (params) => {
    return qs.stringify(params, { arrayFormat: 'brackets '})
  },
});

2. jQuery 라이브러리 이용하기

const resp = await axios.get(url, { 
  params,
  paramsSerializer: (params) => {
    return jQuery.param(params)
  },
});

3. 직접 paramsSerializer 구현하기

const resp = await axios.get(url, { 
  params,
  paramsSerializer: (paramObj) => {
    const urlParams = new URLSearchParams();
    for (const key in paramObj) urlParams.append(key, paramObj[key]);
    
    return urlParams.toString();
  },
});

• paramsSerializer 의 매개변수인 paramObj 는 요청과 함께 전송되는 URL 파라미터이다

{
  userIds: [1, 2],
  name: 'Jae',
}

• urlParams 는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의한 변수이다

• urlParams.append() 를 통해 주어진 키/값 쌍을 새로운 검색 매개변수로 추가한다
  ( new URLSearchParams() )

• urlParams.toString() 을 통해 문자열을 반환한다 ( toString() )

userIds=1&userIds=2&name=Jae

4. axios 기본 셋팅 해주기

매번 설정해주기 번거로우니, axios 기본 설정을 셋팅하면 더욱 편리하게 사용할 수 있다

axios.defaults.paramsSerializer = function(paramObj) {
    const params = new URLSearchParams()
    for (const key in paramObj) {
        params.append(key, paramObj[key])
    }

    return params.toString()
}

✅ 결과

이제 정상적인 url이 전송된다❗

url?userIds=1&userIds=2&name=Jae

---

👍🏻 공식문서 톺아보기

axios 공식문서에 URL 인코딩 관련 자료가 잘 정리되어 있다😊