[Tomcat] "SyntaxError: 유효하지 않은 문자입니다." 해결방법

1. 크롬이나 엣지에서는 동작하나 IE에서는 동작하지 않는 현상

2. 영어로는 되지만 한글은 안되는 현상

 

* 원인

url 을 요청할 때의 인코딩 문제였다. 크롬이나 엣지에서는 자동으로 인코딩을 해주는데 IE에서는 그렇지 않다.

const url = `/api/bbs/${bbsId}/posts`;
const requestUrl = Object.keys(restConditions).reduce((result, key, ix) => {
            return `${result}${ix===0?'?':'&'}${key}=${conditions[key]}`
        }, url);

필자는 이러한 형식으로 검색어를 담아 GET 방식으로 url을 요청하였고, IE에서는 해당 검색어가 한글일 때 검색이 되지 않는 것이다.

Quert String에 [],.; (특수문자) 또는 한글이 포함되면 발생하는 에러라고 하는데 다른 브라우저들은 인코딩 처리를 해주지만 IE에서는 인코딩처리를 안해준다고 한다.

 

* 해결방법

GET 방식으로 요청하기 전에 URI를 encodeURI()함수를 사용하여 처리해줘야 한다.

const encodedUrl = encodeURI(requestUrl);

 

encodeURI() 함수 예시이다.

const uri = 'https://mozilla.org/?x=шеллы';
const encoded = encodeURI(uri);
console.log(encoded);

 

* 참고 사이트

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

https://ldne.tistory.com/210