ReactJS: IE11 not making new HTTP request, using cached data

From docs

Check this header in your http request :

Cache-Control:

no-cache : Forces caches to submit the request to the origin server for validation before releasing a cached copy

no-store : The cache should not store anything about the client request or server response.

must-revalidate (Revalidation and reloading) :

The cache must verify the status of the stale resources before using it and expired ones should not be used

Expires: 0 -the resource is already expired

You could try adding the "Pragma" header:

headers: { Pragma: 'no-cache'}

also mentioned here : Axios only called once inside self-invoking function (Internet Explorer)

Should client side solutions not work as a last resort you could try setting the headers on server side. If you were using node and express you could write a middleware which would add the headers for desired routes for you, that could look something like this:

function cacheMiddleware(req, res, next) {
    // Should work for detecting IE8+
    if (req.headers['user-agent'].includes('Trident')) {
        res.set({
            'Cache-Control': 'no-store, no-cache, must-revalidate',
            Pragma: 'no-cache',
            Expires: new Date('01.01.2000'),
        });
    }
    next();
}

router.get('/', cacheMiddleware, (req, res) => res.send('content'))

Idea for the solution from link

I just came across the same issue where the IE11 simply ignores the get request to the backend server. The quick way I found to fix is to pass one unnecessary param with the get request, in our case, a timestamp.

const t = Date.now(); 
axios.get(`${API_DOMAIN}/api/bookingep/find?c=${t}`);

Because every time the timestamp is different, the ie11 does send out the get request as expected.