Most of web applications I’ve built were created with modern web browsers in mind. But sometimes I have to deal with older browsers, like Internet Explorer 11.

I was working on my project, adding support for IE11. It was just a matter of adding necessary polyfills. Everything looked fine, but I’ve noticed some weird behavior.

The problem

The app updates data on server, fetches updated data and displays it. It works fine in Chrome, but in IE11 for some reason old data were displayed after fetching. After quick check in the network console it became obvious, that browser didn’t actually request data from backend endpoints, but for some reason used cached responses instead.

While resource caching is a good thing in general (for JS and CSS files, images, etc.), it’s not desirable for backend API requests (in most cases).

Solution

Looks like Internet Explorer 11 (and probably older versions) caches all resources by default, if they don’t have cache headers set.

This can be solved either on server or client side. For me, adding Pragma: 'no-cache' header to every API reqeuest on client side did the trick.

I’m using axios as my primary HTTP client, which makes it easy to set headers for all api requests:

const instance = axios.create({
  headers: {
    Pragma: "no-cache",
  },
});