Trouble with Custom headers with NextJS app

On our site (development–aps-org.netlify.app) we are trying to set Access-Control-Allow-Origin headers.
According to the docs we only need to setup next.config.js to handle the custom headers. But when we deploy we do not have our headers being set. We can see them when running it locally in the inspector in chrome.

We then attempted to set it in the netlify.toml file and we started seeing them in the root page and some (but not all) of our chunked styles and js files. but all pages that have paths did not have the header set.

Not sure what we are doing wrong.

Headers in next.config.js work only on assets renderd in Netlify Functions which would include SSR/ISR assets. Headers in netlify.toml would work only on static assets. You can try using Edge Functions that would add headers on all assets irrespective of how they’re rendered.

1 Like