问如何在create-react-app中隐藏API密钥？

EN

不幸的是，在React客户端中保存任何密钥都是不安全的，即使您使用的是gitignore和.env文件。正如@ClaudiuCreanga指出的那样，React环境变量嵌入在构建中，并且可以公开访问。

你真的应该只在后端保存API密钥或密钥，比如Node / Express。您可以让客户端向后端API发送请求，然后后端API可以使用API密钥进行实际的API调用，并将数据发送回客户端。

以下是对我有效的方法：

我在根文件夹中创建了.env。在该文件夹中，我添加了我的密钥：

 REACT_APP_API_KEY_YT = "key"
//I added YT for youtube which is where my api key is from

然后我转到.gitignore ||或在您的根目录中创建一个.gitignore (如果您没有它)。在.gitignore中，我添加了.env

 #api key
 .env

然后我回到了我的app js文件的根目录。对我来说，这是index.js，对于其他人，它可能是App.js，我创建了一个const API_KEY

 const API_KEY =`${process.env.REACT_APP_API_KEY_YT}`

我通过控制台记录来检查它是否正常工作。

 console.log("API", API_KEY)

我去找undefined了。我停止了服务器(Control + C)并重新启动了服务器。后来我才能看到钥匙。

下面是一个在代码中查找API密钥的示例，即使您试图将其隐藏在环境变量中也是如此。

我使用NewsAPI构建了一个非常简单的应用程序，这需要我注册一个API key。下面是我使用API键作为环境变量获取NewsAPI端点的代码。

fetch(`https://newsapi.org/v2/top-headlines?q=${keyword}&apiKey=${process.env.REACT_APP_API_KEY}`)
  .then(res => res.json())
  .then(
    (result) => {
      setIsLoaded(true);
      setArticles(result.articles);
    })

但是，当我使用Chrome dev工具检查网络请求时，您将能够看到API密钥的实际值。我希望这能帮助人们了解如何在客户端找到API密钥，即使您将其存储为环境变量也是如此。

​

​