如何为NuxtJS SSR服务端设置自定义响应头，适配开发及生产环境

以下方案默认适配服务端渲染(SSR)场景，静态站点部署需额外在托管平台同步配置响应头。

Nuxt 3 配置方式 #

直接在项目根目录的nuxt.config.ts（或.js）文件中添加nitro配置即可，该配置会同时作用于开发环境服务端与生产环境服务端：

export default defineNuxtConfig({
  nitro: {
    responseHeaders: {
      // 匹配所有路径
      '/*': [
        {
          name: 'Cross-Origin-Embedder-Policy',
          value: 'require-corp'
        },
        {
          name: 'Cross-Origin-Opener-Policy',
          value: 'same-origin'
        }
      ]
    }
  }
})

Nuxt 2 配置方式 #

在项目根目录的nuxt.config.js文件中添加render配置即可，该配置对开发、生产环境的服务端同时生效：

export default {
  render: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin'
    }
  }
}

注意事项 #

• 如需仅给特定路径添加响应头，Nuxt3可修改nitro.responseHeaders中的路径匹配规则，Nuxt2可通过编写自定义服务端中间件实现路径过滤。
• 若部署到第三方托管平台，需确认平台是否会覆盖应用侧的响应头配置，如存在覆盖情况需在平台侧的响应头配置面板同步添加上述两个头。

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