문제 상황
캠퍼스플랫폼팀에서 api를 마이그레이션 하는 도중 POST의 request Header(Location)에 접근해 이후 동작을 제어하는 로직이 있었다.
const createMap = useMutation(postMapV2, {
onSuccess: (response) => {
const headers = response.headers as { location: string };
const mapId = Number(headers.location.split('/').pop());
if (window.confirm(MESSAGE.MANAGER_MAP.CREATE_SUCCESS_CONFIRM)) {
history.push(HREF.MANAGER_SPACE_EDIT(mapId));
return;
}
history.push(HREF.MANAGER_MAP_DETAIL(mapId));
}, ....3~4번째 줄을 보면 header에 접근해 location 헤더에서 mapId를 추출하는 로직이다.
현재 mockoon이라는 mock 어플리케이션을 사용중이였는데, mockoon에 대해 잘 모르는 사람들이라면 그냥 가짜 서버라고 생각하면 된다.
실제 POST 로직을 동작하는 것을 봤을 때는, 요청에 대한 응답도 개발자 도구에서도 Location 헤더가 보임을 알 수 있다.
실제로 요청은 잘 오나, 에러가 발생한다.
코드를 살펴보면, location 자체가 undefined이 발생하는 것을 추측할 수 있다. 이 때, console.log를 통해 headers를 보면 location이 읽히지 않는 것을 알 수 있다!
문제 해결
CORS는 브라우저가 실행중인 스크립트에서 사용가능한 헤더를 정의해줄 수 있다. 이를 위해 Access-Control-Allow-Headers를 지원한다.
하지만 이 헤더는 사용가능한 헤더가 몇가지 정의되어 있다. 즉, 아래에 정의되지 않은 헤더는 Access-Control-Allow-Headers 에 작성한다 한들 스크립트에서 사용이 불가능하다.
물론 Location 헤더는 이 정의에 있지 않다. 그럼 어떻게 해결할 수 있을까?
바로 Access-Control-Expose-Headers를 통해 해결할 수 있다.
글의 설명을 빌리자면,
기본적으로 CORS 안전 목록 응답 헤더만 노출됩니다. 클라이언트가 다른 헤더에 접근할 수 있도록 하려면 서버는 Access-Control-Expose-Headers 헤더를 사용하여 헤더를 나열해야 합니다.
따라서 mockoon(가짜 서버)에 해당 헤더를 추가해주면 브라우저 스크립트에서 내가 원하는 Location 헤더를 읽을 수 있다.
요약
현재 환경과 다른 출처의 API를 사용할 때, 스크립트에서 헤더를 읽어야 할 경우
Access-Control-Allow-Headers와 Access-Control-Expose-Headers를 확인하자.
