如何在 Next.js 中设置没有自定义服务器的 X-Frame-Options 标头？答案

【问题标题】：How to set X-Frame-Options header without a custom server in Next.js?如何在 Next.js 中设置没有自定义服务器的 X-Frame-Options 标头？
【发布时间】：2020-10-08 18:14:59
【问题描述】：

我有一个 NextJS 应用程序，我需要设置 X-Frame-Options，但我不确定如何执行此操作。使用 Express，我会使用helmetjs，但我想避免创建自定义服务器，因为：

在决定使用自定义服务器之前，请记住它应该只在Next.js的集成路由不能满足的时候使用您的应用程序要求。自定义服务器将删除重要的性能优化，例如无服务器功能和自动静态优化。

来源：https://nextjs.org/docs/advanced-features/custom-server

显然，使用自定义服务器有一些缺点，Next 提供的页面处理程序对我有用。

【问题讨论】：

标签： node.js reactjs next.js

【解决方案1】：

如果没有自定义服务器，这可以通过在您的 next.config.js 中使用 custom headers 来实现。

// next.config.js
module.exports = {
    async headers() {
        return [
            {
                source: '/(.*)?', // Matches all pages
                headers: [
                    {
                        key: 'X-Frame-Options',
                        value: 'DENY',
                    }
                ]
            }
        ]
    }
}

【讨论】：