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.