如何仅在UAT和PROD环境禁用SendDownstream复选框

1. 移除HTML中硬编码的disabled属性 #

先把Index.html里复选框的disabled属性删掉，硬写的属性会被环境构建逻辑覆盖，无法实现动态控制：

<div class="form-group col-8">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="sendDownstream">
    <label class="form-check-label" for="sendDownstream">send Downstream </label>
  </div>
</div>

2. 用JS动态根据环境控制禁用状态 #

核心是通过环境标识（域名/全局变量/构建注入的环境变量）判断当前环境，再设置复选框的禁用属性。

2.1 确定环境判断方式 #

根据项目实际情况选一种：

• 通过域名判断：适合无构建工具的静态页面

  const currentEnv = window.location.hostname;
  // 定义需要禁用的环境域名
  const disabledEnvs = ['uat.yourdomain.com', 'prod.yourdomain.com'];
  

• 通过构建注入的环境变量：适合用Webpack/Vite/React等框架的项目

  // 以React为例，环境变量通过REACT_APP_前缀注入
  const currentEnv = process.env.REACT_APP_ENV;
  const disabledEnvs = ['uat', 'prod'];
  

2.2 页面加载时设置禁用状态 #

在Index.js里添加页面初始化逻辑，动态控制复选框：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const checkbox = document.getElementById('sendDownstream');
  const currentEnv = window.location.hostname; // 或用构建环境变量
  const disabledEnvs = ['uat.yourdomain.com', 'prod.yourdomain.com'];

  checkbox.disabled = disabledEnvs.includes(currentEnv);
});

2.3 同步修改请求头逻辑 #

即使复选框被禁用，用户仍可能通过调试工具修改状态，所以在callServer函数里也要加环境判断，确保UAT/PROD环境下不会添加下游请求头：

function callServer(method, body, callback) {
  var errorMessage;
  const currentEnv = window.location.hostname;
  const disabledEnvs = ['uat.yourdomain.com', 'prod.yourdomain.com'];
  const isDisabledEnv = disabledEnvs.includes(currentEnv);

  var headers = {'ui-consumer-name': consumerName};
  // 只有非禁用环境且复选框勾选时，才添加下游请求头
  if (!isDisabledEnv && $('#sendDownstream').is(':checked')) {
    headers['company name-send-downstream'] = 'true';
  }
  
  // 后续请求逻辑...
}

3. 验证环境标识准确性 #

确认不同环境的判断依据是正确的：

• LocalHost：localhost/127.0.0.1
• Dev：dev.yourdomain.com或环境变量dev
• UAT：uat.yourdomain.com或环境变量uat
• PROD：主域名或环境变量prod/production

如果用构建工具，要确保不同环境的构建脚本正确注入对应的环境变量，比如package.json里：

{
  "scripts": {
    "build:dev": "REACT_APP_ENV=dev webpack",
    "build:uat": "REACT_APP_ENV=uat webpack",
    "build:prod": "REACT_APP_ENV=prod webpack"
  }
}

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