Cache control header missing in response headers (while using nitro.publicAssets)

[Irelynx]

Environment

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools, nitro
• Runtime Modules: -
• Build Modules: -

Reproduction

Repro link: https://stackblitz.com/edit/github-qlh9as?file=nuxt.config.ts

Build and run in production mode

npm install
npm run build && npm run preview

Add second console and execute the following to test:

curl -vvv http://localhost:3000/fonts/1.jpg

Describe the bug

I tried to tune cache-control and added the following to my nuxt.config:

export default defineNuxtConfig({
  // ...
  nitro: {
    $production: {
      publicAssets: [
        {
          baseURL: '/fonts',
          dir: 'public/fonts',
          maxAge: 60 * 60 * 24 * 365,
        },
      ],
    },
  },
  // ...
}

But while running in production mode, there are no cache-control headers in response:

$ curl -vvv http://localhost:3000/fonts/1.jpg
 *    Trying localhost:3000...
 * Connected to localhost port 3000 (#0)
 > GET /fonts/1.jpg HTTP/1.1
 > Host: localhost:3000
 > User-Agent: curl/8.1.1-webcontainer
 > Accept: */*
 >
 < HTTP/1.1 200 OK
 < connection: close
 < content-length: 4440
 < content-type: image/jpeg
 < date: Fri, 31 May 2024 11:43:45 GMT
 < etag: "1158-JzOQ1jZ9rhfVmWxCXI3zuPWn5+Y"
 < last-modified: Fri, 31 May 2024 11:41:42 GMT
 <

Additional context

Also tested on real server using postman (directly, without proxies like Nginx), cache-control was absent too.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-qlh9as (Open reproduction)

[danielroe]

When you are running nuxi preview you are not running a Nitro server so it is not able to set any headers. Instead you are previewing a static site (namely, a folder full of assets).

If you are generating a static site you will need to configure headers on your site differently, by configuring whatever is serving it.

[Irelynx]

Hi and thanks for the reply.

I tried different approach and started Nuxt app using node .output/server/index.mjs - same result.
How then i should start application to make headers works in this case?

---

When i tried to hook every request/response (using defineNitroPlugin) i see only request related to pages, so technically you are correct, yes. But how static resources served then?

[Irelynx]

I guess the only working way is using routeRules (doesn't work for nuxi preview, but works for node .output/server/index.mjs:

export default defineNuxtConfig({
  // ...
  routeRules: {
    '/fonts/**': {
      headers: {
        'cache-control': `public,immutable,max-age=${60 * 60 * 24 * 365},s-maxage=${60 * 60 * 24 * 365}`,
      },
    },
  },
  // ...
}

[Irelynx]

@danielroe
Sorry for ping, but i guess this issue should be reopened.

[danielroe]

@Irelynx I think your configuration was wrong. Here's a working example:

export default defineNuxtConfig({
  // the $production alias is not _within_ the nitro config
  $production: {
    nitro: {
      publicAssets: [
        {
          baseURL: '/fonts',
          // if you pass a relative path it is relative from the `~/server` directory
          dir: '../public/fonts',
          maxAge: 35,
        },
      ],
    },
  },
})

[Irelynx]

Oh..
Yeah, you are right, $production was inside of nitro, and when I moved it to comply with your example - cache-control header appeared!

Thanks again for your time!