在cra rewired中添加X-Frame-Options响应头的正确语法是什么

本地开发环境 #

你现有配置中的devServer配置语法本身是有效的，仅需做两处小幅优化即可：

1. 合并原有headers，避免覆盖devServer默认配置的其他响应头
2. 将值改为规范全大写格式，避免低版本浏览器识别异常
   修改后的完整配置如下：

module.exports = override(
    fixBabelImports("react-bulma-components", {
        libraryName: "react-bulma-components",
        libraryDirectory: "lib/components"
    }),
    {
        devServer: function(configFunction) {
            return function(proxy, allowedHost) {
                const config = configFunction(proxy, allowedHost)
                config.headers = {
                    ...config.headers,
                    'X-Frame-Options': 'DENY'
                }
                return config
            }
        }
    },
    ...addCompressions()
);

修改后本地执行npm start启动开发服务时，所有响应都会自动携带对应头。

生产环境 #

devServer 配置仅对本地开发服务生效，CRA 打包后的产物是静态文件，本身不提供服务能力，因此响应头需要在托管前端资源的服务侧添加。
你当前使用独立部署的 Node 应用作为后端，直接在后端服务的全局中间件中添加配置即可：

• Express 框架示例：

// 全局中间件，所有响应都会携带该头
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  next();
});

• Koa 框架示例：

app.use(async (ctx, next) => {
  ctx.set('X-Frame-Options', 'DENY');
  await next();
});

如果你的前端静态资源和后端接口分属不同服务托管，仅需在托管前端资源的服务中添加该配置即可，无需修改接口服务逻辑。

提示：如果生产环境需要允许同域名下的页面嵌入，可将值改为SAMEORIGIN。

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