Heroku部署站点如何用浏览器端JavaScript读取config var配置变量

首先明确核心结论：Heroku 项目设置里的 Config Var 是服务端运行时环境变量，仅在 Heroku 运行的服务端程序中可以读取，浏览器端 JS 属于客户端代码，没有权限直接读取这类服务端变量。
就算你通过构建注入的方式把 Config Var 的值写到前端 JS 代码里，也会直接泄露 GitHub API 密钥，完全失去了隐藏密钥的意义，不建议这么操作。

方案1的可行改造方式 #

• 给你的 Heroku 项目加一个轻量后端接口，可以用 Heroku 支持的任意后端语言实现（比如 Node.js、Python Flask 等，仅需几行代码），该接口在服务端读取 Config Var 中存储的 GitHub API 密钥，代理前端发起 GitHub API 请求，再把请求结果返回给前端
• 浏览器端 JS 不再直接调用 GitHub API，改为调用你自己实现的后端接口，全程不需要接触密钥，不会出现泄露问题
• 如果你部署的是纯静态站点、不想额外写后端逻辑，更推荐你用第二种 GitHub Workflow 方案：在 Workflow 运行时拉取需要的 GitHub 数据，直接写入站点的静态 JSON/JS 文件中，构建完的静态包直接包含数据，前端直接读取本地文件即可，不需要额外调用接口也不需要配置密钥。

注意：所有对外公开的前端代码中的内容都是完全透明的，绝对不要把密钥、鉴权凭证这类敏感信息写入前端代码中。

内容的提问来源于stack exchange，提问作者circles.png