Node.js에서 URL객체를 이용하여 쿼리 스트링을 만들때 인코딩 문제

공공 데이터 포털의 api를 이용할 때 key값을 쿼리 스트링으로 보내야 되는데 이때 URL 객체를 이용하여 만들게 될때 의도와 다른 값이 들어가는것을 확인 할 수 있다.

73gWZtFI9JQ0Bg%3D%3D

const newUrl = new URL(`${this.endPoint}`);
newUrl.searchParams.set('serviceKey', serviceKey);

 

search: '?serviceKey=73gWZtFI9JQ0Bg%253D%253D',
searchParams: URLSearchParams {
	...
'serviceKey' => '73gWZtFI9JQ0Bg%3D%3D' },
	...
}

URL에서 제공하는 메서드인
append 와 set 둘다 사용해도 결과는 똑같다.

왜 이러한 현상이 일어나냐면 73gWZtFI9JQ0Bg%3D%3D 해당 api key값을 잘 주목해보면 애초에 공공데이터에서 제공하는 api key값도 사실 urlEncoding해서 준거 였다.
그니까 즉 urlEncode 된 api key를 갖고 Node.js의 URL 객체를 통해서 다시 Url을 만들면서 73gWZtFI9JQ0Bg%3D%3D값이 다시 한번 urlEncode 되어서 73gWZtFI9JQ0Bg%253D%253D 이런 값으로 변형된것이다. 궁금하면 아래 사이트에 해보면된다.
73gWZtFI9JQ0Bg==  -> 73gWZtFI9JQ0Bg%3D%3D -> 73gWZtFI9JQ0Bg%253D%253D
이렇게 된것이다.

 

https://www.urlencoder.org/ko/

URL 인코딩 및 디코딩 - 온라인

해결 방법은 key값을 다시 decode 해준 다음에 URL 객체를 이용해서 set이나 append 해주면 된다.

 

const newUrl = new URL(`${this.endPoint}`);
newUrl.searchParams.append(
    'serviceKey',
    decodeURIComponent(this.serviceKey),
);

 

아주 잘 동작한다.

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent