Ajax Cache

Internet Explorer 11에서 데이터를 저장한 후 다시 조회할 때 새로 저장한 값을 가져오지 못하는 문제가 발생함.

 

1. 데이터를 저장 또는 수정
2. 변경된 데이터를 다시 조회해서 화면에 출력
3. 변경된 데이터가 아닌 이전 데이터가 출력

=> 검색해서 찾아보니 IE에서는 데이터를 조회할 때 브라우저의 캐시값을 사용하는 것이 원인이었다.

 

* 해결 방법

• 쿼리스트링에 타임 스탬프를 전달하는 방법
• POST 메소드를 사용하는 방법
• 캐시 컨트롤(Cache-Control) 헤더를 사용하는 방법

 

1. 쿼리스트링에 타임 스탬프를 전달하는 방법

 

jQuery.ajax({ cache : false })

cache (default: true, false for dataType 'script' and 'jsonp')
Type: Boolean
If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

 

즉, GET 메소드에 대해 요청 URL에 자동으로 _={timestampe} 형식의 쿼리 문자열이 추가되는 방식이다.

 

axios.get('localhost:8080?_=' + new Date().getTime())
.then(response => {});

 

axios의 경우 jQuery처럼 따로 옵션을 제공하지 않기 때문에 요청 URL에 new Date().getTime()으로 직접 타임스탬프를 추가해줘야 한다.

 

2. POST 메소드를 사용하는 방법

 

GET을 요청할 경우에만 캐싱이 되기때문에 대신 POST를 사용하는 방식이 있지만, 이 방법은 REST API에 맞지 않기 때문에 추천되지 않는다.

 

3. 캐시 컨트롤(Cache-Control) 헤더를 사용하는 방법

- HTTP 요청 내에서 클라이언트에 의해 사용될 수 있는 표준 Cache-Control 디렉티브.

Cache-Control: max-age=<seconds>
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached

• max-age =<seconds> :  캐시의 수명을 결정하는 정책이며, 초 단위로 설정한다. 예를 들어 60 * 60 = 3600을 입력하면 한 시간, 3600 * 24 = 86400을 입력하면 하루동안 캐시가 유지된다. 그 이후엔 서버에 요청한 뒤 304 응답을 받을 때에만 캐시를 이용한다. 캐시를 항상 뮤효화하기 위해 max-age=0을 설정할 수 있다.
• no-cache : 캐시의 행동 방식을 결정하는 정책으로, 캐시를 저장하되 캐시가 유효한지 확인하기 위해 매번 서버에 요청한다.
• no-store : 캐시의 행동 방식을 결정하는 정책으로, no-cache와는 다르게 아예 어떤 요청도 캐시를 저장하지 않는다.

 

- HTTP 응답 내에서 서버에 의해 사용될 수 있는 표준 Cache-Control 디렉티브.

Cache-control: must-revalidate
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public
Cache-control: private
Cache-control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-control: s-maxage=<seconds>

• must-revalidate : no-cache 정책을 프록시 서버에게 요청하는 것이다. 그러면 프록시 서버는 오리진 서버에게 캐시가 유효한지 매번 질의하게 된다. 만일 어떤 컨텐츠가 공유 캐시로 설정되어 있었다면 프록시 서버 단에서 캐시를 돌려줄 수 있으므로 그것까지 방지하기 위해서 필요한 정책이다.

 

* 완벽한 캐시 방지를 위한 헤더 설정

Cache-Control: no-cache, no-store, must-revalidate

 

 

참고

developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control

www.huskyhoochu.com/cache-control/

jeonghwan-kim.github.io/dev/2019/08/12/ie-cache.html