将React应用迁移到Nx集成工作区，求助高级代理配置方案

步骤1：修改项目的serve配置 #

打开应用对应的project.json（路径：apps/ydsca/project.json），移除原有的proxyConfig字段，添加customWebpackConfig指向自定义webpack配置文件：

"serve": {
  "executor": "@nrwl/webpack:dev-server",
  "defaultConfiguration": "development",
  "options": {
    "verbose": true,
    "buildTarget": "ydsca:build",
    "hmr": true,
    "ssl": true,
    "sslKey": "certs/localhost.key.pem",
    "sslCert": "certs/localhost.crt.pem",
    "customWebpackConfig": {
      "path": "apps/ydsca/webpack.config.js"
    }
  }
}

步骤2：创建自定义webpack配置文件 #

在apps/ydsca目录下新建webpack.config.js，将原setupProxy.js中的代理逻辑迁移到这里，借助webpack-dev-server的setupMiddlewares选项实现高级代理：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (config, context) => {
  // 扩展devServer配置，注入自定义代理中间件
  config.devServer = {
    ...config.devServer,
    setupMiddlewares: (middlewares, devServer) => {
      // 复用原setupProxy的代理规则与自定义逻辑
      devServer.app.use(
        [
          '/**/common/',
          '/**/commonClassic/',
          '/**/ydscaCommon/',
          '/ymca',
          '/staff'
        ],
        createProxyMiddleware({
          target: 'https://127.0.0.1:9443',
          secure: false,
          changeOrigin: false,
          onProxyReq: function onProxyReq(proxyReq, req, res) {
            console.log('-->',  req.method, req.path, '->', proxyReq.baseUrl + proxyReq.path);
          },
          onError: function onError(err, req, res) {
            console.error(err);
            res.status(500);
            res.json({error: 'Error when connecting to remote server.'});
          }
        })
      );

      // 返回默认中间件列表，保证原有devServer功能正常
      return middlewares;
    }
  };

  return config;
};

步骤3：确保依赖安装 #

如果项目尚未安装http-proxy-middleware，执行以下命令安装开发依赖：

npm install http-proxy-middleware --save-dev
# 或使用yarn
yarn add http-proxy-middleware --dev

说明 #

Nx的@nrwl/webpack:dev-server基于webpack-dev-server实现，通过customWebpackConfig可以完全扩展webpack的devServer配置。利用setupMiddlewares选项，我们可以直接复用原setupProxy.js中的所有高级逻辑——包括多级通配符匹配、自定义请求日志、错误处理等，不受限于Nx原生proxyConfig仅支持静态JSON的限制。

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