프론트엔드
웹브라우저의 이미지 캐싱 이슈 해결하기
두줄요약
이미지 표시 후 XHR 다운로드가 CORS 오류로 실패한 원인을 브라우저의 응답 헤더 캐싱에서 찾았습니다. 요청 URL을 분리해 캐시 재사용을 피하는 방식으로 해결했습니다.
문제 상황
- 화면에는 정상 표시되지만 다운로드 버튼의 XHR 이미지 요청만 CORS 오류로 실패
- AWS S3에서 서빙되는 동일 이미지 URL과 다중 브라우저에서 재현되는 현상
원인 분석
- 브라우저 캐시 대상에 본문뿐 아니라 HTTP 응답 헤더도 포함
- img 태그의 선행 요청으로 Access-Control-Allow-Origin 헤더 없는 응답 캐시 생성
- 이후 XHR 요청이 해당 캐시를 재사용하며 CORS 검증 실패
해결 방법
- img 태그와 XHR 요청의 이미지 링크를 다르게 구성해 캐시 재사용 회피
- img src에 Date 기반 부가 쿼리스트링 추가
주의할 점
- 이미지 표시 요청과 XHR 다운로드 요청 간 캐시·CORS 헤더 상호작용 고려
- 파일명 분리 또는 캐시 방지 헤더 설정도 대안
