Setting Response Headers on Nuxt3

Due to the recent Spectre vulnerability, using SharedArrayBuffer has become somewhat more convoluted and now requires a few additional server-side settings in order for it to work on most browsers. One important step is to add two http response headers:

cross-origin-opener-policy: same-origin
cross-origin-embedder-policy: require-corp

While it is relatively straight forward on Nuxt3, the third version of this framework is so new that the information is rather difficult to find. Since it took me awhile to work out the procedure, I chose to write up this quick guide for the convenience of the next person encountering the same issue.

Step 1: Server Folder

Create a new folder in your Nuxt3 project. Usually, it is called server with a subfolder called middleware. Some people choose to omit the server folder and directly add the middleware folder to the Nuxt3 project folder.

You should now have:

├ .nuxt
├ .output (once you have built the app)
├ assets
├ components
├ layouts
├ node_modules
├ pages
├ public
└ server
 └ middleware
   └ setHeaders.js

Step 2: setHeaders.js

In the middleware folder, create a JavaScript file where the header settings can be stored. For this example, I am calling mine setHeaders.js.

Now add the following code to the setHeaders.js file:

Step 3: Nuxt3 Config File

Go to your Nuxt3 config file (nuxt.config.ts) and, inside the export default defineNuxtConfig function, add the following code:

serverMiddleware: [{ path: ‘~/server/middleware’, handler: ‘~/server/middleware/setHeaders.js’ },]

Make sure to change the path and handler if you do not have the parent server folder.

Your final config file should look as follows (alongside any customized settings, such as my tailwind config and so forth):

That’s it! Thanks for reading, and I hope I could help.