Better Way to Prevent IE Cache in AngularJS?

Question

I currently use service/$resource to make ajax calls (GET in this case), and IE caches the calls so that fresh data cannot be retrieved from the server. I have used a technique I found by googling to create a random number and append it to the request, so that IE will not go to cache for the data.

Is there a better way than adding the cacheKill to every request?

factory code

.factory('UserDeviceService', function ($resource) {

        return $resource('/users/:dest', {}, {
            query: {method: 'GET', params: {dest: "getDevicesByUserID"}, isArray: true }
        });

Call from the controller

$scope.getUserDevices = function () {
        UserDeviceService.query({cacheKill: new Date().getTime()},function (data) {
            //logic
        });
    }

I have added No-Cache headers on the server side and it worked for now. — Ufuk Hacıoğulları
– Ufuk Hacıoğulları, Commented Jun 6, 2013 at 20:50
Ufuk, that seems to be the most effective way to do take care of the problem "globally" or in a more scalable way, without having to make every ajax/REST call unique. You should answer the question, so I can mark it as the answer! You deserve the credit. — binarygiant
– binarygiant, Commented Jun 7, 2013 at 20:02
BTW, I am using node/express for the web server, and I accomplished what Ufuk recommended by adding the following code to express config: app.use(function noCache(req, res, next){ res.header("Cache-Control", "no-cache, no-store, must-revalidate"); res.header("Pragma", "no-cache"); res.header("Expires",0); next(); }) — binarygiant
– binarygiant, Commented Jun 7, 2013 at 20:08

Community · Accepted Answer · 2017-05-23 12:18:18Z

50

As described in one of my other posts, you could disable caching globally in the $httpProvider:

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered May 15, 2014 at 15:03

cnmuc

6,1453 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

yvesmancera Over a year ago

JSHint might complain about $httpProvider.defaults.headers.get['Pragma'] = 'no-cache'; so it's safe to change that line to $httpProvider.defaults.headers.get.Pragma = 'no-cache';

xlhuang Over a year ago

Can I don't use those extras?

James Over a year ago

For those of you who are using Angular Resource you have to substitute $httpProvider with $resourceProvider

Ufuk Hacıoğulları · Accepted Answer · 2013-06-07 23:45:44Z

36

As binarygiant requested I am posting my comment as an answer. I have solved this problem by adding No-Cache headers to the response on server side. Note that you have to do this for GET requests only, other requests seems to work fine.

binarygiant posted how you can do this on node/express. You can do it in ASP.NET MVC like this:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
public ActionResult Get()
{
    // return your response
}

answered Jun 7, 2013 at 23:45

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

2 Comments

Northstrider Over a year ago

is there a DRY implementation of this?

Ufuk Hacıoğulları Over a year ago

@meffect Adding it as a global filter maybe?

UserControl · Accepted Answer · 2014-12-12 11:57:01Z

33

For those using ASP.NET Web API 2 the equivalent solution would be this (Web API does not use same caching logic as MVC):

public class NoCacheHeaderFilter : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        if (actionExecutedContext.Response != null) // can be null when exception happens
        {
            actionExecutedContext.Response.Headers.CacheControl =
                new CacheControlHeaderValue { NoCache = true, NoStore = true, MustRevalidate = true };
            actionExecutedContext.Response.Headers.Pragma.Add(new NameValueHeaderValue("no-cache"));

            if (actionExecutedContext.Response.Content != null) // can be null (for example HTTP 400)
            {
                actionExecutedContext.Response.Content.Headers.Expires = DateTimeOffset.UtcNow;
            }
         }
    }
}

then attach it in WebApiConfig.cs:

public static void Register(HttpConfiguration config)
{
    ....
    config.Filters.Add(new NoCacheHeaderFilter());

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
}

edited Dec 12, 2014 at 11:57

answered Nov 7, 2014 at 10:17

UserControl

15.3k22 gold badges106 silver badges197 bronze badges

3 Comments

RichardC Over a year ago

This solved our issue. We also had to add if(actionExecutedContext.Request.Method.Method == "GET") in the OnActionExecuted event to make it only fire on GET requests

Tony Karel Over a year ago

You'll have to compare to the HttpMethod and not just the string. Like this: actionExecutedContext.Request.Method == HttpMethod.Get

aplon Over a year ago

I had been using the method suggested by @cnmuc, but it would interfere with some External rest services I use (some services rejected the request stating that those headers were not accepted). Applying your filter worked like a charm.

Samuel Bolduc · Accepted Answer · 2016-05-26 16:42:10Z

32

Enabling noCache in the is instance was the best way to accomplish this:

In node/express this works to prevent IE from caching those requests:

app.use(function noCache(req, res, next) {
    res.header("Cache-Control", "no-cache, no-store, must-revalidate");
    res.header("Pragma", "no-cache");
    res.header("Expires", 0);
    next();
});

edited May 26, 2016 at 16:42

Samuel Bolduc

19.3k8 gold badges37 silver badges59 bronze badges

answered Jun 7, 2013 at 20:10

binarygiant

6,43210 gold badges52 silver badges73 bronze badges

2 Comments

Tony Gutierrez Over a year ago

Does this also disable caching on static files? i.e. your "public" folder?

Sentient Over a year ago

@Tony, just add that middleware after serving the static files

dillip · Accepted Answer · 2014-01-27 17:38:46Z

11

you may add an interceptor to generate unique request url. Also you may remove console.log calls

myModule.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('noCacheInterceptor');
}]).factory('noCacheInterceptor', function () {
            return {
                request: function (config) {
                    console.log(config.method);
                    console.log(config.url);
                    if(config.method=='GET'){
                        var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                        config.url = config.url+separator+'noCache=' + new Date().getTime();
                    }
                    console.log(config.method);
                    console.log(config.url);
                    return config;
               }
           };
    });

answered Jan 27, 2014 at 17:38

dillip

1,84218 silver badges16 bronze badges

1 Comment

pasine Over a year ago

A nicer solution instead of manipulate the url would be: check if the request has parameters config.params = config.params || [] and then add your default noCache parameter config.params['noCache'] = new Date().getTime();

khichar.anil · Accepted Answer · 2014-07-25 10:51:11Z

4

I get it resolved by:

$http.get("/your_url?rnd="+new Date().getTime()).success(function(data, status, headers, config) {
    console.log('your get response is new!!!');
});

answered Jul 25, 2014 at 10:51

khichar.anil

5,1141 gold badge27 silver badges21 bronze badges

1 Comment

SMir Over a year ago

God bless StackOverFlow!

Felix · Accepted Answer · 2015-06-18 00:47:27Z

4

Koajs equivalent of binarygiant's answer:

app.use(route.get('*', noCache));

function* noCache(path, next){
    this.set('cache-control', 'no-cache, no-store, must-revalidate');
    this.set('pragma',  'no-cache');
    this.set('expires', 0);
    yield next;
}

answered Jun 18, 2015 at 0:47

Felix

4,1715 gold badges39 silver badges64 bronze badges

Comments

Community · Accepted Answer · 2021-10-07 05:59:28Z

While this approach:

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }
    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}]);

Is correct, '0' is not a valid value for the If-Modified-Since header. It needs to be a valid HTTP-date, for example:

If-Modified-Since: Sat, 29 Oct 1994 19:43:31 GMT

According to the spec:

A recipient MUST ignore the If-Modified-Since header field if the
received field-value is not a valid HTTP-date, or if the request
method is neither GET nor HEAD.

So better be safe than sorry and use an actual date in the past.

If you have any control over the server output, it would be preferable to add no caching headers to that instead.

Ganesh Yadav · Accepted Answer · 2017-07-14 13:21:19Z

2

My solution was adding Cache-Control: no-cache header on the server, plus adding $templateCache.remove() before changing state. I'm using angular-ui/ui-router. I was having issue with IE11 and Edge browser.

$templateCache.remove('/partials/details.html');
$state.go('details');

edited Jul 14, 2017 at 13:21

Ganesh Yadav

2,6852 gold badges33 silver badges53 bronze badges

answered May 29, 2015 at 18:38

Hexadecy

443 bronze badges

1 Comment

Thomas Wana Over a year ago

Do you mean Cache-Control: no-cache?

user1937163 · Accepted Answer · 2013-09-19 07:18:07Z

-3

An obvious solution is to use unique urls. But how can the router urls be changed post initialization Disabling browser caches is not an option, since we need this for normal operations. You could remove templates from the $templateCache when those are no longer needed. (http://docs.angularjs.org/api/ng.$templateCache). Those new ones are added to the cache as soon as downloading completes.

answered Sep 19, 2013 at 7:18

user1937163

11 bronze badge

Collectives™ on Stack Overflow

Better Way to Prevent IE Cache in AngularJS?

10 Answers 10

3 Comments

2 Comments

3 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

2 Comments

3 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related