[CORS] ExposeHeader 설정에 대해 알아보자

 금일 파일 다운로드 API를 신규로 개발하고 배포하였는데,

 

 Front 팀원분이 "신규로 추가된 헤더를 axios 가 처리하지 못하는 것 같다"며, 헤더에 문제가 있는 것 같다고 확인을 요청해 주셨다.

 

 파일 다운로드에 필요한 "Content-Disposition" 헤더가 이번에 신규로 추가되면서 문제가 발생한 것으로 보인다.

 

 확인을 요청하며 추가로 덧붙여주신 내용으로는 Expose Header 관련 내용이 문제가 되는 것 같다며 말씀해 주셨는데, 처음 들어보는 생소한 내용이라 찾아보았다.

 

 직역하면 "노출 헤더"인데, 서버가 ExposeHeader로 지정하지 않은 헤더에 대해서 Access 할 수 없게 처리해주는 설정으로 보인다.

 

 아, 그럼 Server가 Client에게 Response를 전달할 때, 헤더를 빼고 보내버리나 보구나!

 

 라고 생각했는데, 큰 오산이었다. 크롬 브라우저의 개발자 도구를 열고 Response를 확인해보면 해당 헤더가 떡- 하니 박혀있다.

 

 그래서 좀 더 찾아보니, CORS를 통해 노출되지 않으면 클라이언트 측 JavaScript 코드가 Access 불가능한 것이라고 한다.

 예를 들면, XMLHttpRequest 또는 fetch API를 사용했을 때, CORS를 통해 노출되는 게 아니라면 해당 헤더를 Access 할 수 없다는 것이다.

 

요약하면, 서버 응답에 포함된 헤더는 CORS를 통해 노출되는지 여부에 관계없이 브라우저의 개발자 도구에서 볼 수 있지만 클라이언트 측 JavaScript 코드는 CORS를 통해 명시적으로 노출된 헤더에만 액세스 할 수 있다.

 

 하지만 설정이 되어있지 않다고 모든 Header에 접근할 수 없는 것은 아니다.

 기본적인 Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma 와 같은 헤더들은 Access-Control-Expose에 의해 제한되지 않는 한 항상 노출된다.

 

 오늘 뜻하지 않게 지식을 배워 뿌듯한 하루다.

 

 근데 왜 서버에 CORS 설정이 ExposeHeaders 설정이 " * " 로 되어있는데 작동하지 않았던 걸까...