Angular: Add to each request a random number in order to disable caching for IE

Question

IE is heavily caching xhr requests. To overcome this problem users suggested to add a random number to the url. For example here

Whereas this will work, I'm looking for a way to add a random number globally / disable IE caching globally, and caching has also be disabled for resource xhr get calls. I'm guessing that I could achieve this goal by using one of the following approaches. But I'm not sure what I exactly have to do..

a) Using $httpProvider.defaults.transformRequest

b) by using request/response promise chaining which have been added in v 1.1.4

score 0 · Accepted Answer · answered Apr 21 '13 at 21:35

This is an old issue with IE. Not sure how to muck with Angular's $httpProvider (or that I want to), but here is a function that adds a random value to any url, whether or not it already uses a query string:

function noCacheUrl(url) {
    var urlParser = document.createElement('a');
    urlParser.href = url;
    var q = "nc" + Math.random() + "=1";
    q = urlParser.search ? urlParser.search + "&" + q : "?" + q;
    return urlParser.protocol + "//" + urlParser.host + urlParser.pathname + urlParser.hash + q;
}

Note that the name of the added query param is random, not the value, making it less likely to collide with any existing name/value pairs. Example: &nc0.8578296909108758=1

http://jsfiddle.net/LgjLe/

Thanks. I guess combining this function with an http request would be a valid approach. Nevertheless I solved the issue with adding no cache headers to the response at server side, see my answer to the question. — Thomas Kremmel, Apr 26 '13 at 15:25

score 0 · Answer 2 · answered Apr 26 '13 at 15:27

I solved the caching issue with adding no-cache headers to the response at the server, using Django and a custom middleware.

class NeverCacheXhrMiddleware(object):
    """
    sets no-cache headers for all xhr requests
    xhr requests must send the HTTP_X_REQUESTED_WITH header to 
    be identified correctly as a xhr request using .is_ajax()
    see: http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers
    """
    def process_response(self, request, response):
        if request.is_ajax():
            response['Cache-Control'] = 'no-cache, no-store, must-revalidate'
            response['Pragma'] = 'no-cache'
            response['Expires'] = '0'
        return response

Angular: Add to each request a random number in order to disable caching for IE

2 Answers2