如何将 Netlify 的环境变量与 vanilla JavaScript 一起使用？

Question

我没有使用 React 或 Node。 我想将 API 密钥用于我不想提交给 Github 的小项目。 Netlify 内置了环境变量。

您将它们设置在 Netlify 中的名称密钥对中，例如

SECRET_NAME = 密钥

当站点建立时，Node 会用 secretkey 替换我使用 process.env.SECRET_NAME 的任何地方。

但是我没有使用 Node 或构建过程，所以当我在代码中调用process.env.ENV_VAR_NAME时，它当然会失败并出现错误Uncaught ReferenceError: process is not defined

仅使用普通 Javascript 来利用 Netlify 的环境变量的最简单方法是什么？

看到这个建议使用 Netlify Lambda function 的问题，但它仍然使用我没有使用的节点。

Answer 1

经过更多阅读，我知道了两件事。

1. 这个怎么做。 这个视频很有帮助。

2. 您不应该这样做来尝试隐藏 API 机密或密钥。

虽然密钥确实不在您的源代码中，但问题是一旦 Netlify 替换了 API 密钥或密钥，客户端就可以看到它们。 不好。

Answer 2

问题：没有“秘密”客户端。

一个常见的误解是你可以在 React 应用程序中存储秘密......尽管我试图在文档中明确这一点。

为避免暴露您的 API 密钥，您需要在服务器上存储和读取密钥。 这意味着您需要使用诸如 Node.js 之类的服务器端框架来构建应用程序。

推荐解决方案：Netlify Function

Netlify 函数是在同一存储库/部署中创建端点的便捷方式。

替代解决方案：单独的 API

创建一个单独的 API 从第三方 API 提取并返回数据。

考虑使用 CORS 保护您的 API/功能

您可以通过实施 CORS 来使其他站点更难（有解决此问题的方法）使用您的API以仅允许从您的前端域获取。