Disable caching of a single file with try_files directive

Question

I\'m serving Angular 2 application with nginx using location section this way:

location / {
  try_files $uri $uri/ /index.html =404;
}

try_file

Answer 1

Thanks for a great answer Rem! As He Shiming points out with the accepted solution the caching headers don't get added when visiting the root e.g. www.example.com/, but do get added when visiting any deep link, e.g. www.example.com/some/path.

After a lot of digging I believe this is because of the default behaviour of the ngnix module ngx_http_index_module, it includes index.html by default so when visiting the root /, the first location block's rules are satisfied, and index.html gets served without the cache control headers. The workaround I used was to include an index directive without specifying index.html in the first location block, forcing the root / to be served from the second location block.

I also had another problem, I included a root directive in the first location block which broke deep links and is also a bad idea. I moved the root directive to the server level.

Hope this helps, this is my solution...

server {
  listen       80;
  server_name  localhost;
  root   /usr/share/nginx/html;

  location / {
    add_header X-debug-whats-going-on 1;
    index do-not-use-me.html;
    try_files $uri @index;                 
  }

  location @index {
    add_header X-debug-whats-going-on 2;
    add_header Cache-Control no-cache;
    expires 0;
    try_files /index.html =404;
  }
}

I've included debug headers to help make it absolutely clear what location block is serving what content. It's also worth noting the unintuitive behaviour of the add_header directive, essential reading if you also intend to add headers to all requests outside of a location block.