[Error] Get 으로 보내는 주소에 한글이 있을 때

TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters

 

일단 상황은 해시태그를 url 에 담아서 서버로 get 요청을 하는 것이다.

 

해시태그는 당연히 한글이 될 수 있다.

 

프론트 서버에서는 다음과 같은 에러를 뱉어냈다.

 

 

에러발생의 원인인 axios 로 서버에 API 요청을 하는 부분을 보자

 

axios.get(`/hashtag/${data}?lastId=${lastId || 0}`);

 

data 변수에 hashtag 가 들어간다.

 

lastId 는 페이지네이션을 위한 것이므로 여기서는 무시한다.

 

data 에 한글이 들어갈경우 백엔드로 요청하는 API는 '/hashtag/크리스마스' 가 되는 것이다.

 

여기서 바로 에러가 발생한 것이다.

 

그럼 해결책은?

 

바로 enCodeURIComponent & deCodeURIComponent 를 사용하여 한글을 처리해주면 된다.

 

먼저, 브라우저 콘솔창에서 enCodeURIComponent & deCodeURIComponent 를 실행해보자

 

다음과 같이 인코딩/디코딩 되는 것을 확인할 수 있다.

 

이를 활용하여 한글 해시태그를 처리해주자.

 

1. 프론트 측 : enCodeURIComponent 를 사용하여 한글을 인코딩

axios.get(`/hashtag/${encodeURIComponent(data)}?lastId=${lastId || 0}`);

 

2. 백엔드 측 : 받은 변수를 deCodeURIComponent 를 사용하여 디코딩

include: [{
            model : Hashtag,
            where : { name : decodeURIComponent(req.params.hashtag)} //해시태그 조건
          }