使用 create-app 反應 js 如何在 webpack 上設置 X-FRAME-OPTIONS

Question

我在 .net 上搜索過，不確定如何在我的 React 應用程序中設置 X-FRAME-OPTIONS，web.config.js 看起來像這樣，它使用內聯選項

當我加載 index.html 時，它會給出響應 X-FRAME-OPTIONS:DENY 我需要將其更改為 X-FRAME-OPTIONS:SAMEORIGIN，因為我需要在我的應用程序中打開 iframe。 現在我收到 chrome 錯誤和 firefox 錯誤。

不確定如何在開發中更新我的 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/'
  },

Answer 1

X-Frame-Options是一個 HTTP 標頭，它的設置取決於您用作 HTTP 服務器的應用程序，而不是所提供的文件。 在這種情況下，如果你想為webpack-dev-server設置一個 header，你可以這樣做（在webpack.config.js中設置）：

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

Answer 2

nextjs 將以下代碼放在 next.config.js 中

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

Answer 3

您可以在head標簽內的 public/index.html 中設置原始 http 標頭：

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

使用 create-app 反應 js 如何在 webpack 上設置 X-FRAME-OPTIONS

問題描述

3 個解決方案

解決方案1
4 2018-03-14 12:19:34

解決方案2
0 2022-07-20 09:37:56

解決方案3
0 2023-01-11 12:49:27

使用 create-app 反應 js 如何在 webpack 上設置 X-FRAME-OPTIONS

問題描述

3 個解決方案

解決方案1 4 2018-03-14 12:19:34

解決方案2 0 2022-07-20 09:37:56

解決方案3 0 2023-01-11 12:49:27

解決方案1
4 2018-03-14 12:19:34

解決方案2
0 2022-07-20 09:37:56

解決方案3
0 2023-01-11 12:49:27