Prevent Internet Explorer From Caching GET Requests in Angular
Prevent Caching in Internet Explorer

Prevent Internet Explorer From Caching GET Requests in Angular

This is an old issue that gets me every time I begin a greenfield Angular project with a back-end Web API. Internet Explorer caches all AJAX GET requests, which means that a user won’t see any changes after a database update. This is a major issue in any real-world Angular app as there is almost always a requirement for a user to update a database record.

I have come up with solutions to prevent Internet Explorer caching in Angular & Web API projects.

Solution 1: Use POST Requests

The simplest way to prevent caching is to use POST requests, since Internet Explorer only caches GET requests. It is usually a simple code change on client/server side.

Does this sound whacky? Look at the next solution.

Solution 2: Add Response Headers in Angular

A better way to prevent caching GET requests is to set necessary HTTP headers in Angular.

You need to specifically set the following headers to prevent caching:

"Cache-Control": "no-cache"
"Pragma": "no-cache"
"Expires": "Sat, 01 Jan 2000 00:00:00 GMT"

These headers must be set on every GET request sent to the server.

An ideal way to implement this is to use an HttpInterceptor, which would allow us to intercept every HTTP request and set the headers above. The following CacheInterceptor is an implementation is what I use, just put it in a typescript file.

import { HttpEvent, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable()
export class CacheInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
        if (req.method === "GET") {
            const httpRequest = req.clone({
                headers: new HttpHeaders({
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache",
                    "Expires": "Sat, 01 Jan 2000 00:00:00 GMT"
                })
            });
            return next.handle(httpRequest);
        }
        return next.handle(req);
    }
}

You may have noticed the if block for checking for request method. Essentially, we want to limit adding headers to GET requests because Internet Explorer does not cache POST requests.

With the custom interceptor in place, we need to hook it to the root component of the Angular app. It is most likely that the root module is called app.module.ts.

Go ahead and add the following in the providers array to begin using the CacheInterceptor.

providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: CacheInterceptor,
        multi: true // Set to false if you don't have another interceptor
    }
]

multi option allows you to specify multiple interceptors, executing in the order specified in the providers array.

Solution 3: Disable Response Cache on the API

Another way to prevent Internet Explorer from caching GET responses is to disable response cache in the API will always serve fresh response to all clients. If you have multiple Angular clients using the same API, this may be the best solution as there is no need to update Angular code.

[HttpGet]
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public async Task<IActionResult> Get(int id)
{
    // Get record by id...
}

Solution 4: Stop Supporting IE

You have been looking for an excuse to do this so here you go: Microsoft urges you to stop using Internet Explorer.

This is easier said than done, like for example if you’re working on an internal app for the finance industry.

Final Thoughts

In this post, I explained how to prevent caching responses of GET requests in Angular when using Internet Explorer. There are valid reasons for caching, for example, a high traffic application which retrieves your user name on each page. Your name doesn’t change that often so it makes sense to cache the response.

Your specific requirements will dictate what solution you need to use as there is no one solution that fits all.

Umut Esen

Umut is an enthusiastic software developer, latest web and mobile technology adapter and primary author of onthecode.

Leave a Reply

Close Menu