10

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

Peter
  • 10,492
  • 21
  • 82
  • 132

4 Answers4

31

You could try adding the "Pragma" header:

headers: { Pragma: 'no-cache'}

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

Daniel Andrei
  • 2,654
  • 15
  • 16
  • thanks much, it worked. I however read the docs and found that pragma is only for HTTP 1.0 clients but as per my request headers I am on HTTP 1.1. Then why do I need to use Pragma, Cache-control should have worked. – Peter Aug 28 '17 at 07:06
  • @Manu I believe the server does not properly handle cache-control. That might be your issue. Using pragma is basically the same (from a client's perspective) since it is used as a fallback. You can read more here, this is what i got from it : https://stackoverflow.com/questions/10314174/difference-between-pragma-and-cache-control-headers – Daniel Andrei Aug 28 '17 at 07:41
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

RIYAJ KHAN
  • 15,032
  • 5
  • 31
  • 53
  • Hi, added the header('Cache-Control', 'no-cache, no-store') to my request but it still uses cache! – Peter Aug 28 '17 at 06:20
  • Please share request and response header – RIYAJ KHAN Aug 28 '17 at 06:27
  • 1
    ```headers: { Pragma: 'no-cache'}``` should work. ```Pragma``` is the HTTP/1.0 implementation and ```cache-control``` is the HTTP/1.1 implementation of the same concept. – hien Mar 14 '18 at 07:57
2

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

xab
  • 636
  • 7
  • 11
  • Thank you!!! I added pragma no cache to my API requests from the browser but was still getting cached data. Adding this middleware to my express server finally got it working. – Akyuna Akish Jun 04 '19 at 02:30
2

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.

Isaac Guan
  • 211
  • 3
  • 6