How can one add custom http headers to Nuxt __page__ ( not static asset ! ) in Nuxt dev server?

Question

https://github.com/hyperbotauthor/vue-chessground/tree/main/test

My problem is that I have to add custom headers to my Nuxt page in order that SharedArrayBuffer may work.

I know how to add custom headers to assets served from the static folder and to the production server:

render: {
    static: {
      setHeaders(res) {
        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin') 
      },
    },
    dist: {
      setHeaders(res) {
        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin') 
      }              
    }
  },

However in dev server these headers are not added to the Nuxt pages served from the pages folder.

If I hand write an HTML page in the static folder, then SharedArrayBuffer will work on that page. But not on the Nuxt page.

Is there any way to make Nuxt dev server add headers to Vue rendered pages?

EDIT:

If I include the hand written, in separation working HTML in an iframe from the Vue page, then it again won't work.

EDIT:

I opened an issue at Nuxt:

https://github.com/nuxt/nuxt.js/issues

Answer 1

You also need to add the headers to the response for pages as well. Try testing using Postman or something similar to view response headers, when you try to load the static resources, as well as the nuxt pages.

Setting render: { static: ... } in nuxt.config.ts worked for the static resources.

To set up middleware for the server creating the initial html pages you can do:

// middleware/setSameOriginHeader.ts

export default function (req: any, res: any, next: any) {
     res?.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
     res?.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
}

// nuxt.config.ts

export default {
  ssr: false,
  ...
  // middleware to set headers on pages
  serverMiddleware: ['~/middleware/setSameOriginHeaders.ts'],
  // set headers on resources in static dir
  render: {
    static: {
      setHeaders(res: any) {
        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
      }
    }
  },
  ...
}