Caching directives for index.html is ignored

Question

I know this is a duplicate of https://learn.microsoft.com/en-us/answers/questions/731947/caching-directives-for-indexhtml-is-ignored.html, but it we rather urgently need support on how to work around this.

We are running a React SPA in static web apps, and want to disable caching of the index.html file.

We have added a staticwebapp.config.json file, and we can apply a no-cache directive using wildcards. But it doesn't work for specific files.

Working (but applies to all files):

 {  
   "routes": [  
     {  
       "route": "/*",  
       "headers": {  
         "cache-control": "no-cache"  
       }  
     }  
   ]  
 }  

Not working:

 {  
   "routes": [  
     {  
       "route": "/index.html",  
       "headers": {  
         "cache-control": "no-cache"  
       }  
     }  
   ]  
 }  

The documentation states that "When protecting a route that serves a file, always use the full path of the file such as /profile/index.html."

We obviously don't want to disable caching for every single file in the app, so I need a way to indicate the specific file.

We have verified that the staticwebapp.config.json is being used, as it works with a wildcard. The problem is specifically about pointing to /index.html

Answer 1

Hi @Brian Pedersen , I believe you posted the same question in which I responded, so posting here as well. This is a known issue that will be address in an upcoming update. I would estimate it could rollout within in the next month or so.

Answer 2

I managed to find a workaround, as we only have a single html file, I can target it with a wildcard, which works. {

    "routes": [
      {
        "route": "/*.html",
        "headers": {
          "cache-control": "no-cache"
        }
      }
    ]
  }