Tuesday, October 27, 2015

AngularJS caching issue for Internet Explorer for Ajax (GET) requests

Generally we face the cache issue for particularly internet explorer in angularJs when we use $http to get the data from the server.The reason for this problem is when we request the same call again to the server , IE fetches the response from the cache instead from updated result. This can be shown clearly from the network capture window of IE.
When we request the server for the first time the response code would be 200(OK) , if we make the same call again , we would get response code as 304 (Not Modified) .
To fix the above problem we can plug few settings to the main angular module  or to each HTTP get request.
var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $httpProvider.defaults.cache = false;
    if (!$httpProvider.defaults.headers.get) {
      $httpProvider.defaults.headers.get = {};
    // disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
    //.....here proceed with your routes