Watch out! When you send requests via angular’s $http, IE could be caching and re-serving the result.
Gimme the fix
Whack this into your app.js to stop the caching of GET requests in IE.
.config([
'$httpProvider', function ($httpProvider) {
// Initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// Enables Request.IsAjaxRequest() in ASP.NET MVC
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
// Disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}
])
Hey! as a bonus you also get the fix to make Request.IsAjaxRequest()
work. Have a read of Why ASP.NET MVC Request.IsAjaxRequest method returns false for $http calls from angular if you like.
What’s going on?
To my understanding, by setting the If-Modified-Since
header to a zero date, we’re forcing IE to skip it’s local cache check with any expiration date it thinks it has, and instead issue a conditional request (extra reading: Understanding Conditional Requests). This conditional request asks the server if the file has been modified since 0 (zero date aka empty) and the server always responds with a HTTP/200 OK
.
Some more reading
I plucked the code for this fix from the following stack overflow answer. Go give them an upvote: http://stackoverflow.com/questions/16098430/angular-ie-caching-issue-for-http
A little more reading about how the If-Modified-Since header works: http://www.feedthebot.com/ifmodified.html
An interesting stack overflow question about caching, which is relevant here: http://stackoverflow.com/questions/5017454/make-ie-to-cache-resources-but-always-revalidate
Finally, the obligatory link to the reference doc. Make sure you read about “Setting HTTP Headers”: https://docs.angularjs.org/api/ng/service/$http