Angular：企业代理下动态切换代理配置访问开发与生产环境

方案1：通过环境变量传递环境标识 #

利用Node.js环境变量动态注入环境标识，无需手动修改代理配置文件。

步骤1：改造proxy.config.js #

将固定的环境字符串替换为从环境变量读取的值，默认保留Development作为 fallback：

var HttpsProxyAgent = require('https-proxy-agent');
var proxy = process.env.http_proxy || process.env.HTTP_PROXY || 'http://proxy:6565';

// 读取环境变量，默认使用Development
var targetEnv = process.env.ANGULAR_PROXY_ENV || 'Development';

var config = [
  {
    context: '/getThings',
    pathRewrite: { '^/getThings': '' },
    secure: false,
    target: `https://endpoint/${targetEnv}/getThings`,
  },
  {
    context: '/getNames',
    pathRewrite: { '^/getNames': '' },
    secure: false,
    target: `https://endpoint/${targetEnv}/getMoreThings`,
  },
  // 其他代理配置项...
];

module.exports = config;

步骤2：配置启动命令 #

在package.json的scripts中添加分环境的启动命令，Windows和Mac/Linux环境的环境变量设置语法略有区别：

{
  "scripts": {
    "start:dev": "set ANGULAR_PROXY_ENV=Development && ng serve --proxy-config proxy.config.js",
    "start:prod": "set ANGULAR_PROXY_ENV=Production && ng serve --proxy-config proxy.config.js",
    // Mac/Linux环境替换为：
    // "start:prod": "export ANGULAR_PROXY_ENV=Production && ng serve --proxy-config proxy.config.js"
  }
}

之后直接运行npm run start:dev或npm run start:prod即可一键切换代理目标环境。

方案2：使用代理配置工厂脚本 #

如果需要更复杂的环境逻辑（比如不同环境对应不同的代理规则），可以用工厂函数生成对应配置。

步骤1：创建proxy.config.factory.js #

var HttpsProxyAgent = require('https-proxy-agent');
var proxy = process.env.http_proxy || process.env.HTTP_PROXY || 'http://proxy:6565';

// 根据环境生成对应代理配置
function generateProxyConfig(env) {
  return [
    {
      context: '/getThings',
      pathRewrite: { '^/getThings': '' },
      secure: false,
      target: `https://endpoint/${env}/getThings`,
    },
    {
      context: '/getNames',
      pathRewrite: { '^/getNames': '' },
      secure: false,
      target: `https://endpoint/${env}/getMoreThings`,
    },
    // 其他配置...
  ];
}

// 从命令行参数或环境变量获取环境，默认Development
var targetEnv = process.argv[2] || process.env.ANGULAR_PROXY_ENV || 'Development';
module.exports = generateProxyConfig(targetEnv);

步骤2：配置启动命令 #

{
  "scripts": {
    "start:dev": "ng serve --proxy-config proxy.config.factory.js Development",
    "start:prod": "ng serve --proxy-config proxy.config.factory.js Production"
  }
}

关键说明 #

• proxy配置脚本运行在Node.js环境，无法直接访问前端的environment.ts文件，二者运行环境完全分离（一个是构建/启动阶段的Node端，一个是浏览器端）。
• 企业代理的HttpsProxyAgent配置无需改动，不影响环境切换逻辑。

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