如何将web.config中的数据传递到view controller？

web.config是服务端存储的配置文件，前端JavaScript无法直接读取，需要先由后端服务读取配置，再注入到渲染的视图页面中，最终传递给前端的view controller使用。

• 第一步：在web.config的appSettings节点中添加需要传递的配置项，示例如下：

<configuration>
  <appSettings>
    <!-- 示例配置：前端调用的接口根地址 -->
    <add key="ApiBaseUrl" value="https://your-domain.com/api" />
    <!-- 其他需要传递的配置项可依次添加 -->
    <add key="EnvType" value="production" />
  </appSettings>
</configuration>

• 第二步：后端服务读取web.config配置，以ASP.NET MVC为例，在后端控制器的Action中读取配置并传递给视图：

public ActionResult Index()
{
    // 读取web.config配置
    ViewBag.ApiBaseUrl = System.Configuration.ConfigurationManager.AppSettings["ApiBaseUrl"]?.ToString();
    ViewBag.EnvType = System.Configuration.ConfigurationManager.AppSettings["EnvType"]?.ToString();
    return View();
}

• 第三步：在Razor视图页面（.cshtml）中将配置注入到前端可访问的作用域：

<!-- 在视图的script标签中定义全局配置对象，注意放在前端控制器加载之前 -->
<script>
window.AppGlobalConfig = {
  apiBaseUrl: '@ViewBag.ApiBaseUrl',
  envType: '@ViewBag.EnvType'
}
</script>
<!-- 后续再加载你的xxx.controller.js文件 -->
<script src="xxx.controller.js"></script>

• 第四步：在xxx.controller.js中直接读取注入的配置即可使用，以常见的AngularJS前端框架为例：

angular.module('yourApp').controller('xxxController', function () {
  const vm = this;
  // 读取注入的配置
  vm.apiBaseUrl = window.AppGlobalConfig.apiBaseUrl;
  vm.envType = window.AppGlobalConfig.envType;
  
  // 后续业务逻辑直接使用上述配置即可
});

• 不要通过该方式传递敏感配置：比如密钥、数据库密码、内部接口凭证等，这类配置会直接暴露在前端源码中，存在严重安全风险
• 避免全局变量污染：如果不想使用全局window对象挂载配置，可以将配置作为参数传入前端控制器的构造函数，或者挂载到前端框架的全局实例上
• 特殊字符提前转义：如果配置值包含单引号、双引号、换行等特殊字符，需要在后端渲染前做转义处理，避免前端出现JavaScript语法错误
• ASP.NET Core场景说明：web.config在Core场景中仅用于IIS部署配置，应用配置默认存储在appsettings.json中，读取后注入到前端的逻辑和上述步骤一致

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