nextjs - 💡(How to fix) Fix Cannot Set Vary Header in Middleware Since v15.5.0 [1 comments, 2 participants]

TL;DR

• The issue can be worked around by manually merging the custom vary header with the default Next.js header in the middleware.

Guidance

• Review the Next.js documentation for middleware to understand how headers are handled and overridden.
• Check the response.headers object for any existing vary headers before appending a custom one.
• Consider using a different approach to set custom headers, such as using the response.setHeader method instead of append.
• Verify that the custom vary header is correctly merged with the default Next.js header by inspecting the response headers in the browser's dev tools.

Example

const customVaryHeader = 'my-custom-header';
const existingVaryHeader = response.headers.get('vary');
if (existingVaryHeader) {
  response.headers.set('vary', `${existingVaryHeader}, ${customVaryHeader}`);
} else {
  response.headers.set('vary', customVaryHeader);
}

Notes

• The issue seems to be related to a regression in Next.js version 15.5.0, which was previously fixed in version 15.2.0.
• The provided example code only sets two headers, my-custom-header and vary, but the actual implementation may involve more complex header management.

Recommendation

• Apply workaround: Manually merge the custom vary header with the default Next.js header in the middleware, as shown in the example code snippet. This approach allows for more control over the headers and can help resolve the issue until a fix is available in a future version of Next.js.