웹브라우저의 이미지 캐싱 이슈 해결하기

본 글은 웹브라우저의 이미지 캐싱으로 인해 발생하는 CORS 이슈와 그 해결 과정을 다룹니다. 이미지는 화면에 정상적으로 표시되지만, 다운로드 시 CORS 에러가 발생하는 문제를 겪었습니다.

초기에는 파일 서버의 CORS 헤더 설정을 의심했지만, S3 설정은 올바르게 되어 있었습니다. 문제의 원인은 브라우저가 HTTP 요청을 캐싱할 때 응답 본문뿐만 아니라 헤더까지 함께 캐싱한다는 점을 간과했기 때문입니다.

`<img>` 태그로 이미지를 로드할 때는 캐시된 헤더 정보가 사용되지 않지만, JavaScript의 XHR 요청으로 다운로드할 때는 캐시된 헤더 정보가 영향을 미쳐 CORS 에러가 발생했습니다. 이 문제를 해결하기 위해 브라우저 캐싱 메커니즘을 이해하고, 필요에 따라 캐시를 무효화하거나 올바르게 관리하는 방법을 적용해야 합니다.