如何在客户端JavaScript中访问Azure静态Web应用的应用设置？

Azure静态Web应用中通过「配置」->「应用设置」创建的服务器端应用设置，无法直接在前端JavaScript中读取——这类设置存储在服务器侧，不会主动暴露给客户端浏览器。你可以通过以下两种方式实现访问：

方法一：通过API函数转发（推荐，更安全） #

这是处理敏感信息的标准方式，避免直接暴露敏感数据到前端：

1. 在静态Web应用中创建一个API函数（支持Node.js、Python等多种语言）
2. 在API函数内部读取服务器端的应用设置：
   Node.js示例：

   module.exports = async function (context, req) {
       // 从服务器环境变量中读取设置
       const userName = process.env.userName;
       // 注意：绝对不要返回密码到前端，敏感信息仅在后端逻辑中使用
       context.res = {
           body: { userName: userName }
       };
   }
   

3. 在前端index.html的JavaScript中，通过fetch调用该API获取所需内容：

   fetch('/api/getAppSettings')
       .then(response => response.json())
       .then(data => {
           console.log('获取到的用户名:', data.userName);
           // 在这里使用获取到的设置
       })
       .catch(error => console.error('获取设置失败:', error));
   

方法二：构建时注入环境变量（仅适用于非敏感、构建阶段确定的设置） #

如果你的设置无需保密，且在构建阶段就已确定，可以通过前缀标识让构建工具将变量注入前端代码：

1. 在Azure静态Web应用的应用设置中，为变量添加对应框架的前缀：比如React项目用REACT_APP_开头，Vue项目用VUE_APP_开头，示例：REACT_APP_USERNAME={username}
2. 在前端代码中直接访问该变量：

   console.log('用户名:', process.env.REACT_APP_USERNAME);
   

警告：这种方式会将变量值打包进前端代码，绝对不能用于存储密码等敏感信息，否则会直接暴露给所有客户端。

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