Axios에서 URL 특수문자로 인한 서버 에러 해결법 소개

Axios에서 URL에 포함된 특수문자로 인한 서버 에러 해결하기

안녕하세요! 오늘은 웹 개발을 하면서 자주 마주치게 되는 URL 인코딩 문제에 대해 이야기해보려고 합니다. 특히 Axios를 사용하여 요청 URL에 특정 특수 문자를 포함하는 경우 서버에서 발생할 수 있는 에러에 대한 해결책을 소개하겠습니다.

들어가며

프로그래밍에서 다양한 라이브러리와 프레임워크를 사용할 수 있지만, 각 도구들이 규정에 따라 동작하지 않을 경우 생각하지 못한 곳에서 오류가 발생하기도 합니다. 이번 포스트에서는 Axios를 통해 서버에 요청을 보낼 때 특정 특수 문자가 포함되는 경우에 발생하는 에러를 다루어 보겠습니다. 이러한 문제를 해결하면서 더 나은 코드를 작성하는 데 도움이 되길 바랍니다.

문제의 원인

특정 특수 문자, 예를 들어 '['와 ']'가 포함된 URL을 Axios로 서버에 보내면, 자바 서블릿 기반의 톰캣 서버에서 Invalid character found in the request target이라는 에러가 발생합니다. 이는 톰캣이 RFC 3986과 RFC 7230 규정을 준수하기 때문에 발생하는 현상입니다.

브라우저는 기본적으로 자바스크립트에서 제공하는 URL 인코딩 기능으로 URL의 특수 문자를 인코딩하여 보내지만, Axios가 이를 다시 변환하여 원복하는 과정에서 문제가 생깁니다.

해결책

이 문제를 해결하는 방법은 URLSearchParams 객체를 활용하여 특수 문자를 안전하게 인코딩하여 서버로 전송하는 것입니다. 아래 예제를 통해 구체적인 코드를 살펴보겠습니다.

1. URLSearchParams 객체 사용하기

// 예시로 사용할 검색 텍스트
const searchText = '<script>alert("xss")</script>[]';

// URLSearchParams 객체 생성
const params = new URLSearchParams();
params.append('searchText', searchText);

// Axios GET 요청
axios.get('some-url', { params })
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error occurred:', error);
    });

이렇게 하면 Axios가 URLSearchParams를 사용하여 요청을 보낼 때, '['와 ']'가 자동으로 %인코딩되어 서버에 전달됩니다. 이는 우리가 서버에서 안전하게 데이터를 받을 수 있도록 도와줍니다.

2. 커스텀 인코딩 설정하기

만약 기본적인 인코딩 방식으로 부족하다면, Axios의 paramsSerializer 옵션을 사용하여 더 세부적인 커스텀 인코딩을 설정할 수 있습니다:

const axiosConfig = {
    params: {
        searchText: '<script>alert("xss")</script>[]',
    },
    paramsSerializer: {
        encode: (value) => {
            // 여기에 커스텀 인코딩 로직 추가 가능
            return encodeURIComponent(value);
        }
    }
};

axios.get('some-url', axiosConfig)
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error occurred:', error);
    });

마무리하며

이번 포스트에서는 Axios를 이용한 HTTP 요청에서 URL에 특정 특수 문자가 포함될 때 발생할 수 있는 에러와 그 해결 방법을 살펴보았습니다. 특수 문자로 인해 발생하는 오류는 예상치 못한 곳에서 발생할 수 있으므로, URL 인코딩에 대한 정확한 이해가 필요합니다.

프로그래밍에서 종종 마주치는 이러한 문제들을 해결해 나가면서 여러분의 개발 경험이 한층 더 풍부해지길 바랍니다. 질문이 있으시면 언제든지 댓글로 남겨주세요!

다음 포스트에서 또 만나요! ����