AJAX cache problem with $resource in IE8

[dbrunner]

Internet Explorer 8 caches AJAX requests. When this caching operates, a GET request will not even it the server; IE simply generates its own 304. This bizarre design choice causes serious problems. More details here: http://stackoverflow.com/questions/1013637/unexpected-caching-of-ajax-results-in-ie8

When using jQuery AJAX calls, the problem can be solved with the following configuration command:

$.ajaxSetup({ cache: false });

This does not seem to work when using $resource, presumably because $resource does not use the jQuery AJAX functionality. It seems that $resource needs a no-cache mode which, under IE8, would append a timestamp query parameter to prevent unwanted caching.

A fix or elegant workaround would be appreciated! We would love to tell our customers to drop IE8, but it turns out that the judicial system forces them to use IE8, so we're kind of stuck.

[ziodave]

+1

[djsmith42]

+1. I was looking for an equivalent to $httpProvider.responseInterceptors for the request side, so I could add a cache slayer query argument to all GET requests for my app, but none could be found.

[petebacondarwin]

@djsmith42 : Take a look at this: #929

[djsmith42]

@petebacondarwin it looks like that pull request has still not been accepted. Am I mistaken?

[petebacondarwin]

Not at this stage - but if this is something you are interested in then I
suggest you put your comments there to prevent duplication of issues.

On 20 November 2012 22:23, djsmith42 notifications@github.com wrote:

@petebacondarwin https://github.com/petebacondarwin it looks like that
pull request has still not been accepted. Am I mistaken?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1418#issuecomment-10576452.

[iojohnso]

+1

[pkozlowski-opensource]

A new version of the request interceptors PR is here: #1701

[iojohnso]

@pkozlowski-opensource Ok, i see the PR, but I'm quite new to angular and github. What is a quick workaround for this IE caching issue?

Is there already an existing build from @inukshuk's branch? I take it I would have to get that, then add my own custom interceptor to workaround this IE8 caching problem? Thanks.

[inukshuk]

@iojohnso until the PR is merged you will have to replace the $http implementation of angular.js with the code found in ng/http.js of the PR branch.

You can then register a request interceptor that adds a bogus parameter to the requests cached by IE8 or something along those lines. If you have any questions related to the interceptors just post them at #1701 – I'll be glad to help.

[iojohnso]

Thanks, I got it to work! In case others are wondering, I replaced the $http implementation in angular.js from the PR branch, and added the following "interceptors" service...

angular.module('interceptors', [])
    .config(function ($httpProvider) {
        $httpProvider.requestInterceptors.push('httpRequestInterceptorIECacheSlayer');
    })
    // IE 8 cache problem - Request Interceptor - https://github.com/angular/angular.js/issues/1418#issuecomment-11750815
    .factory('httpRequestInterceptorIECacheSlayer', function($log) {
        return function(promise) {
            return promise.then(function(request) {
                // If not a partial, append timestamp query string
                if(request.url.indexOf("partials/") === -1) {
                    var d = new Date();
                    request.url = request.url + '?cacheSlayer=' + d.getTime();
                }
                $log.info('request.url = ' + request.url);
                // return the config object to pass it on to the next interceptor
                return request;
            });
        };
    });

Looking forward to seeing a best practice way of accomplishing this.

[zachrybaker]

This is a pretty significant issue. I am surprised this hasn't been merged to the main branch yet.

[hutch]

I'm new to Angular, and this is the first real problem I've encountered with Angular. Unfortunately I started with Angular 2 days ago and I've spent about 1 day of that trying to figure out what's going on.

Anyway, something similar is happening with Safari on OS X.

It affects data and partials.

I seem to have dealt with the partials with a trick I found after googling around yesterday. The trick involves removing elements from the template cache. Seems to work, but it's very ugly and I'm afraid it's going to need to be repeated throughout the code.

The data cache is especially annoying in Safari. I'm using $http.get('/data/something.json', {cache : false}) -- this is also something I found by googling. Safari is claiming a status of 200 with 0 bytes transfered, and my server is not being asked for the json data. I don't know if this is a Safari thing or an AngularJS thing or a combination (at the moment I'm blaming Safari [edit: I've confirmed that it's a Safari problem]) but it's rather difficult to develop the backend and frontend simultaneously when the data won't update.

I can get around the data problem by developing on Chrome, then test on Sarari after resetting it (this is bad, and it's not going to be good in production... in fact, how can this not be a problem in production?)

[sampov2]

+1

[tkremmel]

+1

[rcpeters]

+1, I suppose I will revert back to jquery for client server communication.