Axios를 이용하여 CI 값을 get으로 보내는 테스트를 하던 중 원하는 결과값을 못받는 상황이 생겼다.
다음은 테스트를 진행한 코드이다
export const somthingAPI = async (params) => {
const { data } = await getTokenAPI();
return await customAPI.get(SOMTHINE_URL, {
headers: {
Authorization: 'Bearer ' + data.access_token,
'Content-Type': 'application/json',
},
params,
});
};
다음의 get 요청의 parameter에는 특수문자가 포함된 값이 들어있다.
다음 API를 call 할 때 params는 쿼리로 URI에 들어가게되는데, 한글이나 특수문자는 문자를 변화시켜서 보내지 않으면 정확한 값을 보낼 수 없다.
다음은 구글 개발자 문서에 URL 인코딩에 대해 올라온 문서의 한 내용이다.
'유효한' URL은 그 자체로 충분할 것 같지만 실제로는 그렇지 않습니다. 예를 들어 브라우저의 주소 표시줄에 입력된 URL은 특수문자(예: "上海+中國")를 포함할 수 있고, 이 경우 브라우저는 이러한 문자를 전송하기 전에 내부적으로 다른 인코딩으로 변환해야 합니다. 마찬가지로 UTF-8 입력을 생성하거나 수락하는 코드는 UTF-8 문자가 있는 URL을 '유효한' 것으로 취급할 수 있지만 그러한 문자를 웹 서버로 보내기 전에 변환해야 합니다. 이 과정을 URL 인코딩 또는 퍼센트 인코딩이라고 합니다.
특수문자를 query param으로 넣을때 encodeURIComponent 등을 사용하여 진행하였지만, 올바른 값을 받지 못하였다.
이유는
axios에서 query param에 특수문자가 들어가면 자동변환해주는 기능이 동작하기 때문이다.
추가적으로 encodeURIComponent을 사용하여 encoding 시켜주는 두번 encode 되는 경우가 생기기 때문에, 자동변환과정을 통해 로직을 짜면 된다.
결과
const axios = require('axios');
// 특수문자가 포함된 파라미터
const specialCharactersParam = '특수문자 테스트: @#$%^&*';
// GET 요청 보내기
axios
.get('<https://example.com/api>', {
params: {
data: specialCharactersParam,
},
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
});
다음과 같이 특수문자를 param으로 넣는 axios GET 요청을 하게되면 response의 값에서
path: '/api?data=%ED%8A%B9%EC%88%98%EB%AC%B8%EC%9E%90+%ED%85%8C%EC%8A%A4%ED%8A%B8:+%40%23$%25%5E%26*',
다음과 같이 encoding 값을 확인 할 수 있다.
하지만, 아직 fetch API 라이브러리 중 URL-encode 기능을 지원하지 않는 라이브러리가 있다.
추가
URL에 포함되는 특수문자 중 변환이 필요한 특수문자는 다음과 같다.
| 문자 | 인코딩 | 문자 | 인코딩 |
| ':' | %3A | "'" | %27 |
| '/' | %2F | '(' | %28 |
| '?' | %3F | ')' | %29 |
| '#' | %23 | '*' | %2A |
| '[' | %5B | '+' | %2B |
| ']' | %5D | ',' | %2C |
| '@' | %40 | ';' | %3B |
| '!' | %21 | '=' | %3D |
| '$' | %24 | '%' | %25 |
| '&' | %26 | ' ' | %20 or + |