Bug/incorrect docs: `*` only matches one component in headers

Experiencing this on site id 199d0847-8b6d-4a96-bf7e-17ba4b119424.

I have the following in netlify.toml:

[[headers]]
for = "/_app/*"
[headers.values]
Cache-Control = "public,max-age=31536000,immutable"

However, the rule only gets applied to urls like /_app/something, while it should be applied to everything under /_app/ like /_app/assets/pages/foo.jpeg according to docs.

I think this worked before, because I setup this rule earlier (and suppose I verified it works back then) and just now noticed it stopped working, but I might be wrong.

I see this

cache-control: public,max-age=31536000,immutable

on /_app/start-6a8ca302.js, /_app/pages/__error.svelte-eea8c270.js, and /_app/assets/pages/index.svelte-89b7acd6.css.

This is what you were expecting?

Hi, thanks for your reply. Yes, I realized that Javascript and CSS assets are served correctly. So what I realize is the actual issue is that assets served via Netlify Large Media (i.e. images on my site, which are also served under the /_app/assets/ folder with a hash in URL, thanks to ViteJS) don’t respect the header rules, and set their own cache policy.

So if you go to /eshop/, there’s a lot of images, and all of them have cache-control: public, max-age=0, must-revalidate. Nice way to verify it is to let the page load for first time, and then refresh the page (make sure your devtools don’t disable cache). This is what I see:

The 304s are images - they were previously loaded with the above cache-control: [...],must-revalidate, while the 200 OK 0 ms responses are those assets loaded as immutable. Sorry for not investigating properly, and by searching forums I see that this is a known issue. Thanks for your help with rubber-ducking :smiley:

1 Like