[Javascript] 특수문자 [ ] %가 인코딩이 되지 않는 문제 해결하기

 

 

chrome과 axios에서는 기본적으로 URL에 percent-decoding(=%인코딩)을 하지만 특수하게 [, [, %는 인코딩하지 않고 서버에 전달한다. axios에서 보내는 파라미터를 자바스크립트 내장 객체인 encodeURI() 혹은 encodeURIComponent()를 사용하여 보낼 수도 있지만 axios에서 문자열을 한번 더 %인코딩하여 '%'가 '%25'로 인코딩되는 문제가 생긴다. (그래서 톰캣 7.x 버전 이상의 서버인 경우 한번 더 인코딩을 처리해줘야 하는 문제가 생긴다.)

 

💡 %인코딩이란?

Percent-encoding은 URL 맥락에서 특정 의미를 갖는 8비트 문자로 인코딩하는 메커니즘으로 URL 인코딩이라고도 한다.

인코딩은 '%' 다음에 변경할 문자를 ASCII 값으로 표현되는 16진수가 위치하는 대체 문자열로 구성된다.

 

인코딩 규칙은 여기서 확인!

 

 

 

 

URLSearchParams 타입의 object를 주입하게 되면 URLSearchParams.toString()을 사용하여 요청 URL을 생성하기 때문에 인코딩되어 전송되어 서버에서 따로 처리해 줄 필요가 없다!

const params = new URLSearchParams();
params.append('filter', 'PRICE_ASC')

 

 

 

 

---

 

출처 및 참고

https://ykh6242.tistory.com/entry/tomcat-요청된-URL에-와-가-포함되면-톰캣-웹-서버가-받아주지-않는-이유와-해결책