MVC - Cache control not working for static content

Question

In our application, we would like to cache static contents like images, css etc For security reason, we have added HTTP headers as -

<httpProtocol>
  <customHeaders>
    <!-- Add custom headers to not allow the page content to be cached -->
    <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
    <add name="Pragma" value="no-cache" />
    <add name="Expires" value="0" />
  </customHeaders>
</httpProtocol>

now it was suppose to validate the request and use cache if its validated. But its not working. Even its a same request, it still loads static content again and again.

I tried adding custom code in config as follows

<staticContent>
  <clear/>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00:10:00" />
  <mimeMap fileExtension=".jpg" mimeType="image/jpg"/>
  <mimeMap fileExtension=".png" mimeType="image/png"/>
  <mimeMap fileExtension=".css" mimeType="text/css"/>
  <mimeMap fileExtension=".js" mimeType="text/javascript"/>
</staticContent>

Still it does not work.

I dont want to use outputcache.

Is there any option available?

Answer 1

no-store disables cache completely MDN link#1 , MDN link#2

As I understand you need only one header:

<add name="Cache-Control" value="no-cache" />

At first load browser loads a resourse: Notice status code is 200 and a response size is 8 KB. Server should add ( IIS does it automatically) Etag header (ex Etag: "8099f82b154d41:0" ) Then browser caches the file and saves Etag value. On next page reloading browser sends that value as a If-None-Match request header (ex If-None-Match: "8099f82b154d41:0" ). Server checks the value and if file is not changed responds with 304 http-code: Notice status code is 304 and a response size is 117 B. In that case the cached file is used.

If file would be changed on the server, server would respond with a new file and 200 http-code, cache wouldn't be used.