[Javscript] HTTP Header에 한글 넣으면 발생하는 오류

---

서론

대략적인 동작 구조

Vue.js로 프로젝트를 진행하다 게이트웨이로 헤더 값을 보내는 과정 중에 겪었던 일이었다.

기존엔 영어나 숫자로 이루어진 값을 헤더에 담아 보냈었는데, 한글 데이터를 보내게 되면 에러가 발생했다.

한글 이름을 헤더에 담아 보내야했기 때문에 반드시 필요했던 과정이었다.

 

원인

HTTP Header 표준에 한글은 포함되어 있지 않기 때문이다.

그래서 한글 데이터만 담으면 에러가 발생했고 해당 내용은 링크에서 알 수 있었다.

실제 에러도 HTTP RFC와 관련된 에러가 발생하는 것을 볼 수 있었다.

 

대처 방법

이미 잘 알고 있겠지만, 인코딩을 해서 보내면 된다.

URIEncoding 방식을 이용했고, Javscript에서 제공해주는 함수를 이용했다.

대표적으로 encodeURI()와 encodeURIComponent() 함수가 제공되는데 

이 둘의 차이를 잘 구분해서 사용해야 한다.

encodeURIComponent docs에 들어가면 위와 같은 내용을 확인할 수 있다. 자세한 차이는 해당 링크를 참고하자.

아무튼, 한글을 인코딩 한 뒤 정상적으로 작동하는 것을 확인했다.

단, 받는 쪽에서도 디코딩을 진행해야 하므로 이 점에 주의해야 한다.

 

URI Encoding이 아니더라도 Base64와 같은 인코딩 방식을 이용할 수 있는데, 자 그렇다면 어떤 것이 어떤 상황에 써야 적합할까?

라는 의문을 갖고 있어야 한다.

 

이 의문은 다른 포스팅에서 해소해보도록 하겠다.