Response Headers not set on Vercel environment

Hello all,

I am encountering an issue where all response headers that I set in the Middleware work fine locally but are not included in the response after deployment to a Vercel environment.

Current Behavior

When running locally, I can see all headers added correctly. However, when deployed, some headers that are set using res.headers.set() in the middleware do not appear in the final response.

Here is the code from my middleware:

1import { NextResponse } from 'next/server';2import { NextRequest } from 'next/server';3import crypto from 'crypto';4import { Session } from './session'; // Assuming Session is imported from another module56export function middleware(request: NextRequest) {7    const optimizelyCmsUrl = process.env.OPTIMIZELY_CMS_URL ?? '';89    // Add CSP10    const nonce = Buffer.from(crypto.randomUUID()).toString('base64');11    const cspHeader = `12        default-src 'self';13        script-src 'self' 'nonce-${nonce}' 'strict-dynamic' ${optimizelyCmsUrl} 'unsafe-eval';14        style-src 'self' 'unsafe-inline';15        img-src 'self' ${optimizelyCmsUrl} blob: data:;16        font-src 'self';17        object-src 'none';18        base-uri 'self';19        form-action 'self' ${optimizelyCmsUrl};20        frame-ancestors 'self' ${optimizelyCmsUrl} https://app-ocxcjomu1du97yp002.cms.optimizely.com;21        upgrade-insecure-requests;22    `;2324    // Replace newline characters and spaces25    const contentSecurityPolicyHeaderValue = cspHeader.replace(/\s{2,}/g, ' ').trim();26    console.log("Generated CSP Header:", contentSecurityPolicyHeaderValue);2728    // Create response with modified headers29    const requestHeaders = new Headers(request.headers);30    requestHeaders.set('x-nonce', nonce);3132    let response = NextResponse.next({33        request: {34            headers: requestHeaders,35        },36    });3738    // Clone the response to set headers correctly39    response = new NextResponse(response.body, response);4041    // Add the CSP header to the response42    response.headers.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);4344    // Enable dev mode adjustments45    const isDev = process.env.NODE_ENV !== 'production' || request.nextUrl.host.includes('localhost');46    if (isDev) {47        response.headers.set('X-Dev-Mode', 'true');48    }4950    // Make sure we're always in English - multi language is not supported yet51    if (!request.nextUrl.pathname.startsWith("/en")) {52        const newUrl = request.nextUrl.clone();53        newUrl.pathname = "/en" + newUrl.pathname;54        return NextResponse.redirect(newUrl, {55            status: isDev ? 307 : 30856        });57    }5859    // Assign a Visitor ID cookie, so we can identify and track individual visitors60    const visitorId = Session.getOrCreateVisitorId(request);61    Session.addVisitorId(response, visitorId);6263    return response;64}

Expected Behavior

I expect Vercel Edge to behave the same way as my local dev environment and apply all headers that are set in the middleware. Specifically, I would like the Content-Security-Policy and other headers set in the response to be included when deployed to production.

Environment Info

Deployment URL or Custom Domain: https://optimizely-saas-cms-visual-builder-n48d1c09t.vercel.app/en/savings
Environment: Local (works as expected), Preview (issue exists), Production (issue exists)
Project Framework: Next.js
Build Settings:
- Framework Preset: Next.js
Node/Runtime Version: Node 18
Package Manager: npm
Relevant Packages: next@14.2.4

Steps to Reproduce

Add the above middleware to a Next.js application.
Deploy the application to Vercel.
Observe that headers set locally in dev mode are not present in the deployed version.

Any help or insight would be greatly appreciated. Has anyone encountered this behavior before or found a way to get the headers applied consistently in both environments?

Thanks in advance!