如何为Nx单体仓库中的React应用添加自定义响应头？

配置分开发环境和生产环境两个场景处理：

开发环境配置 #

根据你使用的构建器选择对应配置方式：

• Vite构建器（Nx 16+ React项目默认配置）
  找到目标React应用目录下的vite.config.ts，补充server和preview节点的headers配置：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
  
  export default defineConfig({
    // 保留原有配置项
    plugins: [react(), nxViteTsPaths()],
    server: {
      host: 'localhost',
      port: 4200,
      // 新增以下响应头配置
      headers: {
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Cross-Origin-Opener-Policy': 'same-origin',
      },
    },
    preview: {
      host: 'localhost',
      port: 4300,
      // 预览构建产物时也需要加相同头
      headers: {
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Cross-Origin-Opener-Policy': 'same-origin',
      },
    },
  });
  

  改完重启nx serve 你的应用名就生效。

• Webpack构建器
  两种配置方式二选一即可：

  1. 修改应用目录下的webpack.config.js，给devServer补充headers：

     module.exports = {
       // 保留原有配置
       devServer: {
         // 新增以下响应头配置
         headers: {
           'Cross-Origin-Embedder-Policy': 'require-corp',
           'Cross-Origin-Opener-Policy': 'same-origin',
         }
       }
     }
     

  2. 直接修改应用目录下的project.json，找到serve对应的target，补充headers参数：

     "serve": {
       "executor": "@nx/webpack:dev-server",
       "options": {
         "buildTarget": "my-react-app:build",
         "hmr": true,
         // 新增以下响应头配置
         "headers": {
           "Cross-Origin-Embedder-Policy": "require-corp",
           "Cross-Origin-Opener-Policy": "same-origin"
         }
       }
     }
     

生产环境配置 #

生产环境响应头由托管静态资源的服务层配置，和Nx构建流程无关，常见场景配置如下：

• Nginx托管：在对应站点的server/location配置块中添加：

  add_header Cross-Origin-Embedder-Policy "require-corp" always;
  add_header Cross-Origin-Opener-Policy "same-origin" always;
  

• Node服务（Express/Koa等）托管：在静态资源中间件前加响应头处理逻辑，以Express为例：

  // 静态资源服务前添加该中间件
  app.use((req, res, next) => {
    res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
    next();
  });
  app.use(express.static('./dist/my-react-app'));
  

• 第三方静态托管平台（Vercel/Netlify/对象存储等）：按照平台对应的headers配置规则添加即可，不需要改项目代码。

配置提醒：开启require-corp策略后，所有跨源加载的第三方资源（CDN脚本、图片、字体等）必须返回合法的CORS响应头，否则会被浏览器拦截。调试阶段如果遇到大量跨源资源报错，可以临时把Cross-Origin-Embedder-Policy的值换成credentialless降低拦截强度，上线前再调整回要求的配置。

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