reactjs 如何在Webpack上设置X-FRAME-OPTIONS

nkcskrwz 于 2023-01-12 发布在 React

关注(0)|答案(3)|浏览(279)

我在网上搜索过，不知道如何在我的react应用程序中设置X-FRAME-OPTIONS，web.config.js看起来像这样，它使用的是内联选项
当我加载index.html时，它会给出响应X-FRAME-OPTIONS：DENY我需要它将其更改为X-FRAME-OPTIONS：SAMEORIGIN，因为我需要在应用程序中打开iframe。
不知道如何在开发中更新web.config.js，我非常困惑。

module.exports = {
  devtool: 'eval',
  entry: {
    app: [
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://0.0.0.0' + web_port,
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    vendor: [
      'react',
      'react-dom',
      'react-router',
      'react-router-dom',
      'react-forms-ui',
      'mobx',
      'mobx-react',
      'sockjs-client',
      'react-table',
      'react-bootstrap-table',
    ],
    fonts: glob.sync("./src/webfonts/*")
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/static/'
  },

reactjs

来源：https://stackoverflow.com/questions/49277205/react-js-using-create-app-how-to-set-x-frame-options-on-webpack

3条答案

按热度按时间

nqwrtyyt1#

X-Frame-Options是一个HTTP头，它的设置取决于您用作HTTP服务器的应用程序，而不是服务的文件。在这种情况下，如果您想为webpack-dev-server设置一个头，您可以这样做（在webpack.config.js中设置）：

devServer: {
    ...
    headers: {
        'X-Frame-Options': 'sameorigin'
    }
}

赞(0）回复(0）举报 2023-01-12

dfddblmv2#

nextjs将以下代码放入next.config.js中

module.exports = {  
    async headers() {
        return [
            {
                source: '/((?!embed).*)',
                headers: [
                    {
                        key: 'X-Frame-Options',
                        value: 'SAMEORIGIN',
                    }
                ]
            }
        ];
    }
}

赞(0）回复(0）举报 2023-01-12

p1iqtdky3#

您可以在public/index.html中的head标记内设置原始http标头：

<head>
    <meta http-equiv="X-Frame-Options" content="sameorigin"/>
  </head>

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs 如何在Webpack上设置X-FRAME-OPTIONS

3条答案

相关问题

热门标签

最新问答