javascript - 在 React 中隐藏 API key

Question

首先我想说我遵循了此处的所有建议 How do I hide API key in create-react-app?但他们都没有工作。我已经搜索了一个多小时，试图找到答案，但一无所获。下面是我的解释。

1. 我使用 create-react-app 搭建我的项目
2. 我正在使用 Google map ，还没有使用过任何其他 API
3. 我在项目的根目录下创建了一个 .env 文件
4. 在该文件中，我添加了 REACT_APP_GOOGLE_MAPS_API_KEY = api key
5. 在我的组件文件 Map.js 中，我添加了 const GM_API_KEY = ${process.env.REACT_APP_GOOGLE_MAPS_API_KEY};(刻度线是在我的文件中围绕这个变量，但它们不会出现在这里)
6. 在我的 map url 中，我像这样添加了 key "https://maps.googleapis.com/maps/api/js?key=GM_API_KEY&callback=initMap"

7. 此外，在我的 Map.js 文件的顶部，我添加了一个 console.log(GM_API_KEY);
以确保它正常工作。
8. 我导出了我的 map 组件，然后将其导入到我的 App.js
9. 我重新启动了我的服务器

当页面加载时，我的 key 在控制台中输出，但我仍然收到来自 Google 的错误消息，说我的 API key 无效。此外，如果我在页面加载后手动 console.log(GM_API_KEY)，我会收到一个引用错误，指出 GM_API_KEY 未定义

如果有人有任何建议或可以提供任何帮助，我将不胜感激!感谢您花时间查看我的问题。

Answer 1

我对敏感数据所做的甚至没​​有将它们保存在 .env 我在项目的根目录中打开终端并运行 export API_KEY=sdf54vvetvf...然后在您的应用程序中，您可以通过 process.env.API_KEY 访问它注意您需要在每次从该 session 关闭终端时手动添加它