🌐 브라우저 이미지 캐시 방지하기

Disable Image Cache

웹페이지 속도 테스트나 혹은 이미지를 다루는 라이브러리 중에 이미지를 Ajax로 불러오다가 캐시에 의한 CORS 에러 문제 등 여러 이유들에 의해서 브라우저가 이미지를 캐싱 하지 않게 하고 싶은 때가 있을 것이다.

그러나 직접 서버에서 캐시 관련 헤더 설정을 할수 없거나 다른 업체의 서버를 사용하는 경우 결국 프론트단에서 처리해야 한다. ctrl + F5 강력 새로고침으로 임시적으로 해결할수는 있지만, 매번 이럴수도 없고 무슨 방법이 없을까 고민하겠지만 의외로 방법은 간단하다. 

 

브라우저는 이미지를 완전히 같은 url 이름으로 불러들일때는 캐시한 이전 이미지를 불러온다. 이러한 특성을 이용하여 url의 쿼리스트링 값만 다르게 주는 것으로 캐시되지 않은 똑같은 이미지를 불러오도록 하는 편법을 쓸 수 있다.

예를들어 picture.jpg?1222259157 와 같이 이미지 url ? 뒤의 쿼리스트링 값을 랜덤으로 설정해줘서 할당해주면 된다. 쿼리스트링 값이 달라져도 가져오는 리소스는 동일하니 문제 없는 것이다.

아래는 자바스크립트로 현재 날짜 시간값을 쿼리 스트링으로 할당한 예제이다. 이외에도 랜덤 함수로도 구현할 수 있다.

document.querySelector('img').src = `https://이미지경로?${new Date().getTime()}`