axios get 요청시 원하는 대로 인코딩 되지 않을 때

문제

axios에서 get 요청을 할 때 parameter를 사용할 수 있습니다.

이때 예상과는 다르게 동작했던 부분이 있는데요, 바로 “[” square bracket이 encoding 되지 않는것이었습니다.

저는 관습적으로 axios요청시 알아서 encode되어 나갔기에 서버문제인줄 알았는데요, swagger상에서 실행을 해보니 정상적으로 동작했습니다.

이 문제를 해결하기 위해 axios 라이브러리를 찾아보았는데요, encodeURIComponent를 통해 encode된것을 다시 replace하는것을 볼 수 있습니다.

encode function

 

왜 이렇게 구현했을까?

URL의 최신 RFC3986에 따르면 IPv6지원에 따라 대괄호는 예약어로 지정되어있습니다.

[aa12::16ac:27ff:fe43:16ac]:8080 과 같은 형태로 사용할 수 있기 때문입니다.

 

하지만 RFC문서를 보면 host identified에서만 square bracket이 허용된다고 쓰여있기 때문에 버그로 보입니다.

axios issue에서도 등록되어있는것을 확인할 수 있습니다

 

 

 

해결방법

buildURL함수를 보게되면 아래와 같은 식을 볼 수 있습니다.

 const _encode = options && options.encode || encode;

즉 options.encode키에 encode함수를 넣게 된다면 axios에 정의되어있는 encode함수가 아닌custom encode함수를 사용할 수 있습니다.

활용한다면 아래와 같이 될것 같습니다

axios.get('...', {
	params: {
    	...
    },
    paramsSerializer: {
    	encode: // define new encode fn
    }
})