Search code examples
javascriptinternet-explorerreload

How to hard refresh Internet Explorer with clear cache after form submission?


There is a web page which interacts with a webserver to change values in the active directory.

When accessed in Chrome, I could change the data and after form submit, it shows the new values. Meanwhile in Internet Explorer it does not. The data modification itself takes place, so when I change something in IE and refresh the page in Chrome, it shows the new values. But in IE I did press F5 and Control+F5, it still shows the old values. I tried to use location.reload(true); before form submission, but same same.

Only when I close the IE-window and restart it it shows the new values.

How can I hard reset the page for IE and retrieve the actual values after form submit? How could I forbid IE to write something to the cache or clear it?


Solution

  • The problem here is that IE will cache the api result by default.

    For example, you have an API return user profile, and the page shows the data fetched by the API. After you update the user profile and redo the fetching, the api should return new data. It works as expected in Chrome and other browsers, however, IE will return the old data that fetched in the first time. The 2nd fetch doesn't reach to server because IE browser returned the old data immediately.

    How to fix?

    you can add some cache-control http header to explicitly indicate browser not to cache it, that can be done by setting the Cache-Control http header to no-cache value.

    If you use koa js you can basically do this:

    ctx.res.setHeader('Cache-Control', 'no-cache')