set request headers for nuxt public assets .output/public
Hello I'm trying to set request header for script files under _nuxt I tried setting routeRules according to this issue https://github.com/nuxt/nuxt/issues/22141
the problem is the header is set for the response and not for the request ( view img ) is there any way to achieve this ? Thanks
GitHub
How can I set headers for resources in the public folder? · Issue ...
Environment Operating System: Darwin Node Version: v18.16.1 Nuxt Version: 3.6.2 Nitro Version: 2.5.2 Package Manager: npm@9.8.0 Builder: vite User Config: devtools, modules, css, app, routeRules, s...
6 Replies
Hi @FoudreTower. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In Nuxt, the
-
routeRules.headers option sets response headers for matching routes, not request headers. This means that when you configure:
the header will be added to the response for assets under /_nuxt/, not to the request sent by the browser or server when fetching those assets. This is the intended behavior of routeRules—they control how the server responds, not how the client requests resources Hybrid Rendering & Route Rules.
Currently, there is no built-in way in Nuxt to set or modify request headers for static assets like those in .output/public or /_nuxt/ from the server side, because these requests are made directly by the browser to the static file server, and the server cannot influence the headers sent by the browser.
If you need to add custom request headers for static assets, you would need to do so at the client/browser level (e.g., via a service worker or custom fetch logic), or configure your CDN/proxy (such as Cloudflare) to inject headers as requests pass through. Nuxt itself does not provide a mechanism to set request headers for static asset requests routeRules API.
Summary:-
routeRules.headers only sets response headers.
- There is no Nuxt config to set request headers for static assets.
- Modifying request headers for static assets must be handled outside of Nuxt, such as via CDN or browser logic.
I'm sorry, but the knowledge sources do not mention any way to set request headers for static assets via Nuxt configuration.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@502872939960598538> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Let me check the knowledge base for you again. One moment! :books:
----------------------
Setting
app.cdnURL in your Nuxt configuration like this:
will cause Nuxt to serve your built assets (such as those under /_nuxt/) from the specified CDN URL in production. This means that asset URLs in your HTML will be rewritten to use the CDN domain, e.g., <https://static.relationgrid.com/_nuxt/entry.js> app.cdnURL documentation.
However, this setting only affects the URLs used to load assets—it does not provide a way to set custom request headers for those asset requests. The browser will request assets from your CDN, and unless your CDN is configured to add or modify request headers, the headers sent are determined by the browser and cannot be changed by Nuxt.
In summary:
- app.cdnURL changes the domain from which static assets are served.
- It does not allow you to set request headers for those assets.
- To set request headers for CDN-served assets, you must configure your CDN (e.g., Cloudflare, AWS CloudFront) to add or modify headers as needed app.cdnURL.
If you need to set request headers for static assets, this must be handled outside of Nuxt, at the CDN or proxy level.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@502872939960598538> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
See my comment in this issue, it's still a bug and this is the only workaround I found. https://github.com/nuxt/nuxt/issues/22141#issuecomment-1913782216
GitHub
How can I set headers for resources in the public folder? · Issue ...
Environment Operating System: Darwin Node Version: v18.16.1 Nuxt Version: 3.6.2 Nitro Version: 2.5.2 Package Manager: npm@9.8.0 Builder: vite User Config: devtools, modules, css, app, routeRules, s...