Internet explorer(IE) used to cached ajax GET request, whereas other browsers used to hit the server and pull fresh data. You may notice this in IE developer tool bar, that respective GET AJAX request shows as 304, Not Modified request; So, not pulling fresh data and reusing last cached response. Well, We had expected for these AJAX request to pull fresh data from server.
Now, how to fix that. There are multiple ways to fix this IE specific issue:
#1. Add a random string in query string/ cache-buster in the request url. Example:
'user/get/5?rnd=' + new Date().getTime()
If using jquery for ajax call request, then may set cache false globally for all ajax requests, like below:
jQuery.ajaxSetup({ cache: false });
In this approach, it's not like it prevents request/ response from getting cached. It will be cached; But, in next request time will be different from last request, which we are appending in request url. So, last cached response will not be reused for next request.
Some cons in this, like:
- Browser will be caching responses and keeping in memory, even if it's well known, that it's not going to be reused.
- Some times, it's not possible to change the request url, due to server side way handling the request url.
#2. Other work around could be change that request from GET to POST. As POST request will not get cached. So, it will work as expected in IE. But, what if you noticed this issue after a significant time in project, when these type of GET requests have been distributed through out the project and you may not want to go and change at all places. Then, it's a pain to update all existing code! Also, as a side note, in general POST requests are basically used, when we do some modification on server. But, just for getting records from server, we have GET requests.
#3. If we have access to server side. Then, we may choose to change the response header on server side, before returning to client side, to mention not to cache the request. If using web api, then may create a custom action filter class to do this job globally for all GET action methods. Sample class may be like below:
public class NoCacheResponseFilter: ActionFilterAttribute { public override void OnActionExecuted(HttpActionExecutedContext context) { if (context.Response == null || context.Request.Method != HttpMethod.Get) { return; } context.Response.Headers.CacheControl = new CacheControlHeaderValue { NoCache = true, NoStore = true, MustRevalidate = true }; context.Response.Headers.Pragma.Add(new NameValueHeaderValue("no-cache")); if (context.Response.Content != null) { context.Response.Content.Headers.Expires = DateTimeOffset.UtcNow; } } }
Once above filter is ready just register it inside WebApiConfig.cs file and we are set for all the GET requests not to be cached. We may register it like below:
config.Filters.Add(new NoCacheResponseFilter());
#4. If using AngularJS, then you may configure headers of AJAX request globally in Javascript and prevent it from getting cached, while doing service requests like below:
app.config(['$httpProvider', function ($httpProvider) { if (!$httpProvider.defaults.headers.get) { $httpProvider.defaults.headers.get = {}; } $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 1 Jan 2000 01:00:00 GMT'; $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache'; $httpProvider.defaults.headers.get['Pragma'] = 'no-cache'; }]);
Though, it may not work for CORS request.
Above are some of quick ways to fix AJAX GET request/ response caching issue in IE. You may choose which, suits your requirement.
References:
http://stackoverflow.com/questions/16098430/angular-ie-caching-issue-for-http