如何在Nuxt开发服务器中为页面（非静态资源）添加自定义HTTP头

Nuxt 2 可用方案 #

方案1：使用 serverMiddleware 全局注入 #

在 nuxt.config.js 中添加以下配置，该中间件对开发服务器所有请求生效，覆盖 pages 渲染的页面资源：

export default {
  // 保留原有配置的基础上新增
  serverMiddleware: [
    (req, res, next) => {
      res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
      res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
      next()
    }
  ],
  // 你原有的render配置可以保留，不影响生产环境逻辑
  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') 
      }              
    }
  }
}

如果只需要在开发环境生效，可以添加环境判断：

serverMiddleware: process.env.NODE_ENV === 'development' ? [
  (req, res, next) => {
    res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
    next()
  }
] : [],

方案2：使用 render 钩子注入 #

不需要新增中间件，直接在 nuxt.config.js 中添加钩子配置：

export default {
  hooks: {
    render: {
      response(res) {
        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
      }
    }
  }
}

Nuxt 3 可用方案 #

在项目根目录新建 server/middleware/headers.ts 文件，内容如下：

export default defineEventHandler((event) => {
  setHeader(event, 'Cross-Origin-Embedder-Policy', 'require-corp')
  setHeader(event, 'Cross-Origin-Opener-Policy', 'same-origin')
})

该中间件会自动在开发、生产环境生效，无需额外引入配置。 #

配置完成后重启开发服务器即可生效，SharedArrayBuffer 可正常运行，页面内 iframe 引入的静态资源也会因为父页面满足跨源隔离要求正常工作。

内容的提问来源于stack exchange，提问作者hyperbotauthor