How to add an interceptor to each request to keep ie from caching requests

Question

Internet explorer caches http requests. Instead of manually adding a header to each individual function I want to do something like this

axios.interceptors.request.use((config): AxiosRequestConfig => {
return addNoCachingHeader(config);
  });

and

const addNoCachingHeader = (config: AxiosRequestConfig): AxiosRequestConfig => {
  return { ...config, headers: { ...config.headers, Pragma: "no-cache"} };
};

is there a simple way to keep IE from caching requests without going back through my whole app and adding headers to each individual request?

If you don't want the response to be cached you should provide it with the right **response** headers. The client may not be the first consumer of the response, for example; in case of proxy. Therefore it should indicate in the response the appropriate caching for it. — HMR, May 21 '18 at 21:30

score 1 · Accepted Answer · answered May 21 '18 at 21:26

I think using a generic client approach would be better here.

const client = axios.create({
  baseURL,
  timeout: 5000,
  responseType: 'json',
  headers: { Pragma: "no-cache" },
});

And to use in other places import client and call client.get or client.post

if you want to override headers at some point, make this to a function

const client = (headers) => axios.create({
  baseURL,
  timeout: 5000,
  responseType: 'json',
  headers,
});

and use as client({ Pragma: 'no-cache' }).get(...)

score 0 · Answer 2 · answered May 21 '18 at 21:08

0

Create a middleware with the header you want all your requests to use and then have your app use it with app.use(yourHeaderMiddleware(req, res, next)).

answered May 21 '18 at 21:08

leosteffen

379
2
10

score 0 · Answer 3 · answered Jul 10 '23 at 02:29

The correct way is to add these 3 headers in every request:

{
  'Cache-Control': 'no-cache',
  'Pragma': 'no-cache',
  'Expires': '0'
}

Pragma is deprecated but still required to iOS Safari to work.

Just be sure to include these 3 headers in your backend CORS configuration. Otherwise you will find Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response. errors.

Sources:

How to add an interceptor to each request to keep ie from caching requests

3 Answers3