添加xframe报头模块到cra rewired的正确语法是什么?

Question

我试图在我的create react应用程序(重新连接)中返回X-Frame-Options，但我不确定正确的语法用于将函数添加到我现有的覆盖。我该怎么做呢?

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 = {
'X-Frame-Options': 'Deny'
}
return config
}
}},
...addCompressions()
);

前端是一个CRA (rewired)非静态webapp

后端是一个单独托管的节点应用

我还尝试将构建包更改为此构建回建，以便在静态中添加配置。Json文件，但这破坏了很多不同的东西，使用不同的服务器等。

Answer 1

正确的做法是不做……是没用的，不要浪费你的时间。让我们记住，你的CRA页面将在浏览器上执行，它不会向你发送头/数据或任何东西，相反，它也会被Nginx/Apache/NodeJs发送。

Firefox也这么说:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

注意:在元素中设置X-Frame-Options是没有用的!例如，没有效果。不要使用它!X-Frame-Options只能通过设置HTTP报头来工作，如下面的例子所示。

<标题>Heroku h1> 可以通过编写static为静态应用程序配置不同的选项。Json在你的应用程序的根文件夹。

自定义头使用headers键可以设置自定义响应头。它使用与自定义路由相同的操作符。

{
"headers": {
"/": {
"Cache-Control": "no-store, no-cache"
},
"/assets/**": {
"Cache-Control": "public, max-age=512000"
},
"/assets/webfonts/*": {
"Access-Control-Allow-Origin": "*"
}
}
}

https://blog.heroku.com/using-http-headers-to-secure-your-site