Change X-Frame-Options header for Nuxt 3 app

Help
1

I have a Nuxt 3 application running on Vercel. When running a simple

curl https://my-vercel-app.com/ -I

I get the following headers:

cache-control: no-store, max-age=0
content-type: text/html; charset=utf-8
date: Tue, 02 Sep 2025 16:04:36 GMT
server: Vercel
set-cookie: ...
strict-transport-security: max-age=63072000
x-frame-options: DENY
x-vercel-id: ...
content-length: 14245

While I don’t care about most of them, I need the x-frame-options header removed.

  • Is there a user interface to change headers set by Vercel?
  • If not, what’s the correct way to remove this header using Nuxt 3?

Thanks!

4

This header is set by Nitro here and is not a Vercel-specific thing.

You can override this header in your application code. For example, you could do this in a server middleware:

export default defineEventHandler(async event => {
  setHeader(event, 'X-Frame-Options', 'SAMEORIGIN')
})

However, please do not disable the header without being aware of the protection it brings.

1 Like
5

@danielroe thank you very much for your response. Your solution works! I added a new server middleware as suggested by you. When I do npm run dev and cURL it, I can confirm the header is now set correctly.

However, at first, I ran into the issue again, so I checked the code you linked. It seems for error pages (such as a simple 404), the header is enforced to ensure a Nuxt error page is not shown in an iframe! Just wanted to note this here for future refrence in case someone else has the same issue.

Thanks again!

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.