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

Question

I am facing issues in my React application on IE11 where the UI is not hitting backend services for every new request and returning the response from cache data. The application works fine on Chrome.

In case of IE the services end with code : 304 instead of 200. PFB the request headers:

Accept  application/json,*/*
Request GET /services/v0/search/?uid=12900 HTTP/1.1
Content-Type    application/json
Cache-Control   no-cache

PFB the response headers obtained on IE:

Response    HTTP/1.1 304 Not Modified
x-frame-options DENY
x-xss-protection    1; mode=block
x-content-type-options  nosniff

Any clue, what could be the reason behind IE rendering such behaviour? TIA

Answer 1

You could try adding the "Pragma" header:

headers: { Pragma: 'no-cache'}

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

Answer 2

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

Answer 3

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

Answer 4

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.