如何在Create-react-app中禁用X-Powered-By响应头？

当然可以实现！和Next.js的配置思路类似，CRA项目里也能通过几种方式去掉这个响应头，我分开发环境和生产环境两种场景给你梳理可行方案：

开发环境（webpack-dev-server 运行时） #

CRA的开发服务器基于webpack-dev-server，而它底层依赖Express，所以要禁用X-Powered-By，需要修改webpack-dev-server的配置。因为CRA默认封装了配置，你有两种选择：

方式1：用 react-app-rewired 或 craco 自定义配置（无需 eject） #

这种方式不用暴露CRA的底层配置，更推荐：

1. 先安装依赖（以react-app-rewired为例）：

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

2. 在项目根目录新建config-overrides.js文件，添加以下代码：

module.exports = function override(config, env) {
  // 给devServer添加中间件，禁用X-Powered-By
  config.devServer = {
    ...config.devServer,
    onBeforeSetupMiddleware(devServer) {
      devServer.app.disable('x-powered-by');
    },
  };
  return config;
};

3. 修改package.json里的启动脚本，替换成react-app-rewired：

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

重启开发服务器后，你就会发现X-Powered-By头已经消失了。

方式2：Eject 后直接修改 webpack 配置 #

如果你已经执行过npm run eject暴露了配置文件，可以直接修改config/webpackDevServer.config.js：
找到文件中的onBeforeSetupMiddleware函数，添加一行禁用代码：

module.exports = function (proxy, allowedHost) {
  return {
    // ...其他原有配置
    onBeforeSetupMiddleware(devServer) {
      // 禁用X-Powered-By响应头
      devServer.app.disable('x-powered-by');
      // ...原有中间件逻辑
    },
  };
};

生产环境（build 后部署阶段） #

如果是把CRA build后的静态文件部署到自己的Express服务器上，直接在你的Express应用里配置即可：

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

// 核心：禁用X-Powered-By
app.disable('x-powered-by');

// 托管build后的静态文件
app.use(express.static('build'));

// ...其他路由和服务器配置
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

要是用Netlify、Vercel这类托管平台，大部分平台会自动移除这个响应头，或者可以在平台的项目配置里手动设置禁用。

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