[WEB] 브라우저 이미지 캐시 방지

 
 
웹 페이지에 대한 속도 테스트나 이미지를 Ajax로 불러오다가 캐시에 의한 CORS 에러 등 여러 이유들에 의해 브라우저가 이미지를 캐싱하지 않도록 하고 싶을 때가 있다.
 
하지만 직접 서버에서 캐시 관련 헤더를 설정할 수 없거나 다른 업체의 서버를 사용하는 경우 결국 프론트엔드에서 처리해야 한다. 강력 새로고침(ctrl + F5)을 통해 임시 방편의 해결은 가능하지만 매번 이럴 수도 없고. 무슨 방법이 없을까 고민하겠지만 의외로 방법은 간단하다.
 
 
브라우저는 이미지를 완전히 같은 url 이름으로 불러들일 때 캐시한 이전 이미지를 불러온다. 이러한 특성을 이용하여 url의 쿼리스트링 값만 다르게 주는 방식으로 캐시되지 않은 똑같은 이미지를 불러오도록 하는 편법을 쓸 수 있다.
 
예를 들어 picture.jpg?123456와 같이 이미지 url ? 뒤의 쿼리스트링 값을 랜덤으로 설정하여 할당해 주면 되는 것이다. 쿼리스트링 값이 달라져도 가져오는 리소스는 동일하니 문제가 없는 것이다.
 
아래는 자바스크립트로 현재 날짜와 시간 값을 쿼리스트링으로 할당한 예제이다. 이 외에도 랜덤 함수로 구현할 수도 있다.
 

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