Chrome displays ajax response when pressing back button Chrome displays ajax response when pressing back button google-chrome google-chrome

Chrome displays ajax response when pressing back button


Make sure your AJAX requests use a different URL from the full HTML documents. Chrome caches the most recent request even if it is just a partial.

https://code.google.com/p/chromium/issues/detail?id=108425


Just in case you are using jQuery with History API (or some library like history.js), you should change $.getJSON to $.ajax with cache set to false:

$.ajax({    dataType: "json",    url: url,    cache: false,    success: function (json) {...}});


Actually this is the expected behavior of caching system according to specs and not a chrome issue. The cache only differentiate requests base on URL and request method (get, post, ...), not any of the request headers.

But there is a Vary header to tell browser to consider some headers when checking the cache. For example by adding Vary:X-Requested-With to the server response the browser knows that this response vary if request X-Requested-With header is changed. Or by adding Vary:Content-Type to the server response the browser knows that this response vary if request Content-Type header is changed.

You can add this line to your router for PHP:

header('Vary:X-Requested-With');

And use a middleware in node.js:

app.use(function(req, res) {    res.header('Vary', 'X-Requested-With');});