Next.js 9.5.2配置自定义响应头未生效如何解决

我当前使用如下脚本配置自定义安全响应头：

const securityHeaders = [
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block'
  },
  {
    key: 'Referrer-Policy',
    value: 'origin-when-cross-origin'
  }
]

module.exports = {
  async headers() {
    return [
      {
        // 对应用内所有路由生效
        source: '/:path*{/}?',
        headers: securityHeaders,
      },
    ]
  },
}

执行npm run start启动服务后，检查localhost站点的响应头，上述配置的所有响应头均未出现。
当前使用的Next.js版本为9.5.2。

这个问题是Next.js 9.5.x版本的特性限制和配置写法不兼容导致的，按以下步骤处理即可：

• 必须先执行生产构建再启动
  Next.js的自定义响应头是构建阶段注入的规则，修改next.config.js后不能直接运行npm run start，需要先执行构建命令生成新的产物，建议先清理旧缓存避免干扰：

  rm -rf .next
  npm run build
  npm run start
  

• 替换不兼容的路径匹配规则
  你使用的/:path*{/}?是后续高版本才支持的可选尾斜杠匹配写法，9.5.2版本的路由匹配逻辑无法正确识别这个规则，替换为版本兼容的写法即可。如果需要覆盖根路径和所有子路由，可以写两条匹配规则保证全量生效：

  module.exports = {
    async headers() {
      return [
        {
          source: '/',
          headers: securityHeaders,
        },
        {
          source: '/:path*',
          headers: securityHeaders,
        },
      ]
    },
  }
  

按以上步骤操作后重启服务，配置的安全响应头就会正常出现在响应报文里。

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