如何在 MERN Stack 应用程序中隐藏 API 密钥？答案

【问题标题】：How to Hide API Keys In MERN Stack application?如何在 MERN Stack 应用程序中隐藏 API 密钥？
【发布时间】：2020-04-25 18:59:03
【问题描述】：

我正在尝试将 Google 地图添加到我的 MERN Stack 应用程序中。根据一些消息来源，我发现在 create-react-app 中添加 .env 文件并不能解决隐藏 API_Keys 的目的（https://create-react-app.dev/docs/adding-custom-environment-variables/）。如何将我的 API_KEYS 存储在后端（Node.js）中并从 react-app 访问它。 Please find the below link, to check my file structure.

【问题讨论】：

嗨@Sruthi，欢迎来到 Stack Overflow。您能否进一步解释为什么要将 API_KEYS 存储在后端？这将有助于为您提供可靠的建议。
来自 create-react-app 的文档，警告：不要在您的 React 应用程序中存储任何秘密（例如私有 API 密钥）！环境变量嵌入到构建中，这意味着任何人都可以通过检查您的应用程序文件来查看它们。 create-react-app.dev/docs/adding-custom-environment-variables 所以我想存储在后端并隐藏我的 API_KEYS。希望这将帮助您更好地理解问题

【解决方案1】：

你的问题有点不清楚。

在 .env 文件中设置自定义环境变量，防止您意外将 API 密钥推送到代码中，同时还允许您在本地工作时访问它们。你永远不应该将你的 API 密钥暴露给前端。因此，您将它们存储在添加到 .gitignore 的 .env 文件中。

一般情况下，建议从隐藏 API 密钥的后端访问 API。

也可以查看this answer 了解更多信息。

【讨论】：