[Javascript] IE 11 Ajax Caching 끄기 (jQuery, axios)

개발 테스트 중 크롬에서는 괜찮은데 IE 10, 11에서 ajax 결괏값이 안 바뀌는 현상이 발생했습니다.

 

너무 이상해서 찾아보니 IE 10부터는 ajax caching이 get 요청이면서 요청 URL이 이전과 동일하면 브라우저 자체에서 caching을 한답니다... (망할 IE...)

 

해결책

 

찾아보니 총 3가지의 해결책이 있었는데 하나하나 예를 들면서 설명해보겠습니다.

 

ajax 사용할 때 jQuery, axios 2개의 라이브러리를 가장 많이 사용할 거로 생각됩니다.

 

jQuery와 axios 각각 해결방법이 약간 달라 2개를 비교하면서 설명하겠습니다.

 

 

1. get 대신 post를 사용한다.

 

이 방법은 get 요청할 경우에만 캐싱이 되니깐 post를 사용하라는데 사실 restful 하지 않기 때문에 이 방법은 추천 드리지 않습니다.

 

 

2. 파라미터로 timestamp를 추가한다.

 

검색을 해보면, 이 방법이 간단해서 많이 추천하는 거 같습니다.

 

이 방법은 timestamp 파라미터를 추가해서 동일한 url 요청으로 판단되지 않게 하는 방법입니다

 

jQuery

 

jQuery에서는 이 방법을 지원하는데 옵션에 cache: false 를 추가해주면 요청 URl에 timestamp 파라미터가 자동으로 붙습니다.

 

$.ajax({
	url: 'http://localhost:8080',
	type: 'GET',
	cache: false
}).then(res => {
	/* 응답 처리 */
});

 

axios

 

axios는 jQuery처럼 따로 옵션을 제공하지 않아 new Date().getTime()으로 직접 붙여주는 작업을 해야 합니다.

 

axios.get('http://localhost:8080?_=' + new Date().getTime())
.then(res => {
	/* 응답 처리 */
});

 

이런 식으로 ?_=1591515026152 와 같이 자동으로 timestamp가 추가됩니다.

 

 

 

3. header에 Pragma, Cache Control을 꺼준다.

 

역시 마지막엔 가장 좋은 방법이 등장하는 법!!

 

저는 위 2개보다 이게 제일 맞는 방법이라 생각됩니다.

 

바로 헤더의 Pragma, Cache Control의 값을 no-cache 설정해주는 겁니다.

 

jQuery

 

$.ajax({
	url: 'http://localhost:8080',
	headers: { 'Pragma': 'no-cache' },
	type: 'GET'
}).then(res => {
	/* 응답 처리 */
});

 

axios

 

axios.get('http://localhost:8080', { headers : { 'Pragma': 'no-cache' } } )
.then(res => {
	/* 응답 처리 */
});

 

어떤 글을 보면 Pragma와 Cache-Control 헤더 둘 다 no-cache로 선언해주는데 그럴 필요가 없습니다. 

* Pragma : HTTP 1.0 스펙 (1.1에선 삭제됨)

  Cache-Control : HTTP 1.1 스펙

 

Pragma만 설정해주면 브라우저 자체에서 따로 설정하지 않아도 Cache-Control: no-cache로 자동으로 선언해줍니다.

* IE는 Cache-Control만 선언하면 헤더 값에 Pragma를 자동으로 선언 X

  크롬은 Cache-Control만 선언해도 Pragma 자동으로 선언 O

 

요즘은 근데 전부 HTTP 1.1을 사용하지만 혹시 모를 1.0에 Pragma로 헤더 설정을 해줬습니다.

 

 

만약!! ajax 호출마다 저렇게 옵션을 붙이기 귀찮다면 글로벌하게 설정할 수 있습니다. 글로벌하게 설정하는 방법은 딱히 추천하지는 않습니다. 이유는 다른 호출에 캐싱하는 작업이 필요할 수 있을 수도 있기 때문입니다. 잘 판단하시길 바랍니다.

 

jQuery

 

$.ajaxSetup({
	cache: false,
	headers: { 'Pragma': 'no-cache' } /* 둘 중 하나 선택 */
});

 

axios

 

Axios.defaults.headers[‘Pragma’] = ‘no-cache’;

 

 

읽어주셔서 감사합니다.