如何在客户端 Javascript 中调用 Node/Express API 密钥 (.env)？答案

【问题标题】：How do I call a Node/Express API key (.env) in Client-side Javascript?如何在客户端 Javascript 中调用 Node/Express API 密钥 (.env)？
【发布时间】：2019-03-14 18:49:55
【问题描述】：

现在我在客户端 javascript 中使用 OpenWeatherMap API 密钥来开发一个简单的天气应用程序（Node/Express）。我知道这在开发之外并不理想，所以我做了 npm install dotenv。在服务器端，我可以在 Node.js 中很好地获取和设置环境变量。我在控制台退出时可以看到它们。

如何在客户端的 javascript 中调用 API 密钥？例如，目前我的天气应用程序在一个名为weather.js 的文件中具有简单的逻辑，而HTML 使用weather.js。

理想情况下，我只想像http://api.openweathermap.org/data/2.5/forecast/daily?lat=${lat}&lon=${lon}&units=metric&appid=${process.env.WEATHER_API_KEY}那样调用我的api

我知道 .envs 在服务器端，你必须做一些事情才能让它在客户端工作。这里的新 Node 开发人员阅读过多，我认为我对 requireJS、Browserify、模块、.env 等感到困惑......

【问题讨论】：

如果你想在客户端获取一些数据，我看到了 2 种方法：1) 执行 HTTP 请求并从 nodeJS/Express API 获取 .env 的 JSON 数据。 2）在编译期间将这些数据放入您的客户端代码

标签： javascript node.js express browserify dotenv

【解决方案1】：

您不希望您的 API 密钥（或其他机密）公开。在前端使用它们会使它们在检查页面和网络请求日志时可见。您需要在服务器端存储和使用您的秘密。

在您的后端创建一个路由（您可以使用 CORS 保护它不被其他域使用）调用天气 API（使用存储在您服务器上的 .env 中的令牌）并发回数据。

然后让你的前端到达那条路线。

【讨论】：

我想强调不要在前端代码中使用 API 密钥之类的秘密的重要性。如果有人打开 chrome 开发者工具的网络选项卡并查看您的前端应用程序发送到 API 的请求，他们可以很容易地获得您的 API 密钥。如果有人愿意，他们可以获取该 API 密钥并自己使用它，或者他们可以通过发送大量请求来破坏您的应用，例如发送大量请求，这些请求将计入您的使用限制或对您的帐户产生费用。
@djheru 稍微更新了答案，以强调不使用机密的重要性以及您可以在网络选项卡中查看密钥这一事实。

【解决方案2】：

您必须从服务器请求 API 密钥。
这可以通过在后端创建一个简单的路由来轻松完成，该路由将返回密钥作为响应。

如果您不想公开您的 API 密钥（我建议您不要公开它），您可以在后端创建一个路由，该路由将使用您的 API 密钥调用 WeatherAPI，然后客户端将向您的后端发送 HTTPS 请求，然后后端将向 WeatherAPI 创建另一个 HTTPS 请求并将响应发送回客户端。

【讨论】：

【解决方案3】：

您不想将 API 密钥暴露给外界。您可以做的是创建后端路由（/api/keys）使其受 CORS 保护并从前端调用它。

【讨论】：