Serving content depending on http accept header - caching problems?

Question

I'm developing an application which is supposed to serve different content for "normal" browser requests and AJAX requests for the same URL requested. (in fact, encapsulate the response HTML in JSON object if the request is AJAX).

For this purpose, I'm detecting an AJAX request on the server side, and processing the response appropriately, see the pseudocode below:

function process_response(request, response)
{
 if request.is_ajax 
 {
   response.headers['Content-Type'] = 'application/json';
   response.headers['Cache-Control'] = 'no-cache';
   response.content = JSON( some_data... )
 }
}

The problem is that when the first AJAX request to the currently viewed URL is made strange things happens on Google Chrome - if, right after the response comes and is processed via JavaScript, user clicks some link (static, which redirects to other page) and then clicks back button in the browser, he sees the returned JSON code instead of the rendered website (logging the server I can say that no request is made). It seems for me that Chrome stores the latest request response for the specific URL, and doesn't take into account that it has different content-type etc.

Is that a bug in the Chrome or am I misusing HTTP protocol ?

--- update 12 11 2012, 12:38 UTC

following PatrikAkerstrand answer, I've found following Chrome bug: http://code.google.com/p/chromium/issues/detail?id=94369

any ideas how to avoid this behaviour?

Answer 1

You should also include a Vary-header:

response.headers['Vary'] = 'Content-Type'