Javascript 如何在使用Create React App创建对象时维护隐藏的API键

使用

.env

文件，我正在添加API密钥以获取远程数据。但是，我需要使用它们创建一个API对象，如下所示：

const myAPIObject = new fancyAPI({
    url: process.env.REACT_APP_FANCYAPI_URL,
    consumerKey: process.env.REACT_APP_FANCYAPI_CONSUMERKEY,
    consumerSecret: process.env.REACT_APP_FANCYAPI_CONSUMERSECRET
})

---

我在

/src

文件夹中的专用文件中执行此操作。当我编译并在浏览器中检查缩小的代码中的关键文本时，它们就在那里。如何正确地执行此操作？

基本上，这是JavaScript中的一个大问题，您尝试执行的任何操作都会导致此问题。 避免这种情况的唯一方法就是不要这样做

忘记尝试使用客户端JavaScript应用程序中的API键与自己的后端通信。无论您的密钥是否缩小、是否模糊，都会向知道如何使用开发人员工具的任何人公开。这就是为什么你应该不惜一切代价避免这种情况，并依赖于会话

对于应用程序中需要与不受控制的第三方API通信的任何功能，答案是对自己的后端进行简单的CSRF安全AJAX调用，然后让服务器端应用程序代表前端进行API调用，然后将响应返回给客户端应用程序

（）

如您所知，客户端脚本在构建时是静态的，之后不会更改。因此，注入其中的任何变量都将留在那里，并对寻找它们的人可见

---

因此，您的问题的解决方案似乎是实际实现一个服务器应用程序，该应用程序可以隐藏密钥，并基于某种其他机制处理客户端，而不需要客户端向整个世界公开密钥。

您将无法在浏览器上隐藏源代码（以及密钥）。您可能想看看是否有一个服务器可以为您进行所有这些API调用，并只返回响应