Content negotiation ignored when using browser Back button

Question

Here's the situation:

I have a web application which response to a request for a list of resources, lets say:

/items

This is initially requested directly by the web browser by navigating to that path. The browser uses it's standard "Accept" header which includes "text/html" and my application notices this and returns the HTML content for the item list.

Within the returned HTML is some JavaScript (jQuery), which then does an ajax request to retrieve the actual data:

/items

Only this time, the "Accept" header is explicitly set to "application/json". Again, my application notices this and JSON is correctly returned to the request, the data is inserted into the page, and everything is happy.

Here comes the problem: The user navigates to another page, and later presses the BACK button. They are then prompted to save a file. This turns out to be the JSON data of the item list.

So far I've confirmed this to happen in both Google Chrome and Firefox 3.5.

There's two possible types of answers here:

1. How can I fix the problem. Is there some magic combination of Cache-Control headers, or other voodoo which cause the browser to do the right thing here?

2. If you think I am doing something horribly wrong here, how should I go about this? I'm seeking correctness, but also trying not to sacrifice flexibility.

If it helps, the application is a JAX-RS web application, using Restlet 2.0m4. I can provide sample request/response headers if it's helpful but I believe the issue is completely reproducible.

Answer 1

Is there some magic combination of Cache-Control headers, or other voodoo which cause the browser to do the right thing here?

If you serve different responses to different Accept: headers, you must include the header:

Vary: Accept

in your response. The Vary header should also contain any other request headers that influence the response, so for example if you do gzip/deflate compression you'd have to include Accept-Encoding.

IE, unfortunately handles many values of Vary poorly, breaking cacheing completely, which might or might not matter to you.

If you think I am doing something horribly wrong here, how should I go about this?

I don't think the idea of serving different content for different types at the same URL is horribly wrong, but you are letting yourself in for more compatibility problems than you really need. Relying on headers working through JSON isn't really a great idea in practice; you'd be best off just having a different URL, such as /items/json or /items?format=json.

Answer 2

I know this question is old, but just in case anyone else runs into this:

I was having this same problem with a Rails application using jQuery, and I fixed it by telling the browser not to cache the JSON response with the solution given here to a different question:

jQuery $.getJSON works only once for each control. Doesn't reach the server again

The problem only seemed to occur with Chrome and Firefox. Safari was handling the back behavior okay without explicitly having to tell it to not cache.