Edge Middleware not setting Response headers

Hello,

I am not seeing a response header added when testing one of the Edge Middleware examples to modify headers with the intention to eventually use it for a CSP. I've deployed the example to add a custom header, then continue the middleware chain. The only change I made was to add a console log to confirm that request passed through the middleware which it does and the log appears in the project logs..

Here is my middleware.ts taken straight from the example

import { next } from '@vercel/edge';
 
export default function middleware(request: Request) {
  // Clone the request headers
  const requestHeaders = new Headers(request.headers);
 
  // Set a new header `x-hello-from-middleware1`
  requestHeaders.set('x-hello-from-middleware1', 'hello');
 
  // Log that middleware was seen
  console.log('middleware says hello');

  // Use the `next()` function to forward the request with modified headers
  return next({
    request: {
      headers: requestHeaders,
    },
    headers: {
      'x-hello-from-middleware2': 'hello',
    },
  });
}

I'm expecting to see 'x-hello-from-middleware2': 'hello' in the response headers when visiting my deployment.

In fact I just see:

HTTP/2 304
cache-control: public, max-age=0, must-revalidate
date: Wed, 15 Jan 2025 22:09:46 GMT
server: Vercel
x-vercel-cache: HIT
x-vercel-id: <snip>

Preview URL: https://vercel-sandbox-8o5qpt1wf-cinesend.vercel.app/ Environment: Preview (issue exists), Production (issue exists) Project Framework: Vite w/ vanilla js Package Manager: yarn

This is a Vite project if that helps. Root Directory is set in project settings and that directory has this structure:

index.html
middleware.ts
node_modules
package.json
public
src
yarn.lock

Grateful for any thoughts or ideas how to get it working..

-Travis Toronto

Hi , welcome to the Vercel Community!

I used your code and I was able to get the header in the response: https://vite-react-nine-coral.vercel.app/

vite-react-nine-coral.vercel.app

Vite + React + TS

I just created a new Vite+React project using npm create vite@latest vite-react -- --template react-ts and then added the middleware.ts file from your post.

VSCode open middleware.ts

Header in the response

Can you try clearing your browser cache once or try in a incognito tab?

Edit: After posting this message I've updated the code to append a random number to the response header value to disregard any caching behavior.

Thanks so much Anshuman,

Viewing in incognito window helped. Also viewing the production deploy rather than the preview also seemed to help.

I also discovered that I still got the 304 response after an initial 200 in which I saw the custom headers. Since I will be using the middleware to add a dynamic nonce to each request, I had to add a few more cache control headers to get the middleware to run on every request. I added these with a matcher configured for just the main document:

        'Content-Security-Policy-Report-Only': csp,
        'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0',
        'Surrogate-Control': 'no-store',
        'x-vercel-cache-control': 'no-cache, no-store, must-revalidate',
        'Vary': '*'

Thanks again for your response, Travis