Why are browsers caching requests independent from the content-type?

Question

I have a URL which can be served depending on the accepted content-type. When the browser loads that page with html, everything is displayed correct. On that page, more content is loaded from that same URL with application/json. After using a link and then going back through history to the originating page, the json content is displayed.

From chromium and firefox dev utils I can see, that they are loading the page from cache instead of requesting it again.

This is all the headers I sent:

Content-Length:72753
Content-Type:text/html; charset=UTF-8

Why are browsers caching it independent from the content type and is there a way to tell them to do it?

update: It looks like a bug in chromium which didn't get fixed.

update: @T.J. Crowder answer is correct. The vary header solves the problem in chromium and firefox.

Answer 1

If you're allowing caching, then the browser has no way of knowing that you would change the content type if they asked for the content again.

In my view, the best thing to do would be to use different URLs for the HTML vs. JSON, allowing each to be cached to whatever degree is appropriate for them.

If you really want to have them same URL for both types, in theory the Vary response header is intended for that. It's part of the caching stuff, and tells caches (browsers, proxies, etc.) what parts of a request affect the response. This section is also helpful. So for instance, Vary: Accept would say that the response will vary depending on the Accept request header.

But I would test, test, test before relying on that. Cache implementations in general are notoriously buggy. But I have no specific information about bugs related to the Vary header.