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

How do I call a Node/Express API key (.env) in Client-side Javascript?

现在我在我的客户端javascript 中使用 OpenWeatherMap API 密钥来创建一个简单的天气应用程序 (Node/Express)。我知道这在开发之外并不理想,所以我安装了 npm install dotenv。 在服务器端,我可以在 Node.js 中获取和设置环境变量。我 console.log 出去的时候可以看到它们。

如何在客户端调用 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 等感到困惑...

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

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

然后让您的前端点击该路由。

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

如果您不想公开您的 API 密钥(我建议您不要公开它),您可以做的是在您的后端创建一个路由来调用天气API 使用您的 API 密钥,客户端将向您的后端发送 HTTPS 请求,然后后端将创建另一个 HTTPS 请求到天气 API 并将响应发送回客户端。

您不想向外界公开您的 API 密钥。您可以做的是创建后端路由 (/api/keys) 使其受 CORS 保护并从前端调用它。