如何为create-react-app创建的React应用设置指定安全请求头？

嘿，我来帮你理清楚这个问题——你在index.html里加的meta标签其实有几个关键问题，先给你说明白，再给你靠谱的解决方案：

首先得明确两个重要限制：

• X-Frame-Options 不能通过meta标签设置，浏览器完全忽略这种写法，必须通过HTTP响应头来配置才会生效。
• Content-Security-Policy 的frame-ancestors指令也不支持meta标签方式，这个指令只能通过HTTP头生效，meta标签里的CSP规则不包含这个选项。

所以你之前的尝试是无效的，得用下面的方法来配置。

根据你是开发环境（本地调试）还是生产部署场景，有不同的配置方式：

1. 开发环境（本地运行npm start时） #

Create React App默认用webpack-dev-server跑开发服务，我们可以通过自定义配置来添加响应头。推荐用react-app-rewired + customize-cra来修改配置，不用 eject 暴露底层配置：

• 首先安装依赖：

  npm install --save-dev react-app-rewired customize-cra
  

• 在项目根目录创建config-overrides.js文件，添加以下内容：

  const { override, devServer } = require('customize-cra');
  
  module.exports = override(
    devServer(configFunction) {
      return function (proxy, allowedHost) {
        const config = configFunction(proxy, allowedHost);
        
        // 添加自定义响应头
        config.headers = {
          ...config.headers,
          'X-Frame-Options': 'SAMEORIGIN',
          'Content-Security-Policy': "frame-ancestors 'none';"
        };
  
        return config;
      };
    }
  );
  

• 修改package.json里的启动脚本，替换原有的react-scripts命令：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

• 重启开发服务，现在浏览器请求时就能看到这两个响应头了。

2. 生产环境（部署build后的静态文件） #

生产部署的方式不同，配置方法也不一样，这里给你几个常见场景的配置：

场景A：部署到Nginx #

在你的Nginx站点配置里添加以下指令（可以放在server或location块中）：

add_header X-Frame-Options "SAMEORIGIN";
add_header Content-Security-Policy "frame-ancestors 'none';";

注意：如果Nginx已经有其他add_header指令，要确保这些头被正确添加，避免被覆盖。

场景B：部署到Apache #

在项目根目录的.htaccess文件，或者Apache站点配置中添加：

Header always set X-Frame-Options "SAMEORIGIN"
Header always set Content-Security-Policy "frame-ancestors 'none';"

场景C：用Node.js/Express托管静态文件 #

如果用Express来serve build后的静态文件，可以在服务器代码中添加中间件统一设置响应头：

const express = require('express');
const path = require('path');
const app = express();

// 设置静态文件目录指向build文件夹
app.use(express.static(path.join(__dirname, 'build')));

// 添加自定义响应头中间件
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none';");
  next();
});

// 处理所有请求返回index.html（SPA路由需要）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

配置完成后，你可以打开浏览器的开发者工具（Network标签），查看任意请求的响应头，确认X-Frame-Options和Content-Security-Policy是否存在且值正确。

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