Question

我有一个包含API密钥的.env文件，我想在控制台上打印它们。我正在关注本教程https://medium.com/better-programming/using-environment-variables-in-reactjs-9ad9c5322408。这对我不起作用，我的API密钥值不会在控制台上打印，而是会打印未定义。

我的.env文件

S3_BUCKET_NAME=petition-form
AWS_ACCESS_KEY_ID=-----------------
AWS_SECRET_ACCESS_KEY=---------
AWS_REGION=us-east-2
REACT_APP_CLIENT_ID=jfjffffaddfeettgydgdffv

我的app.js文件

import React from "react";

const App = () => {
  console.log(process.env.S3_BUCKET_NAME);
  console.log("adib");
  console.log(process.env.REACT_APP_CLIENT_ID);
  return <h1>Hello</h1>;
};

export default App;

Answer 1

Dotenv仅在服务器端工作。在这种情况下，dotenv需要某种环境来实际存储变量。 Webpack之类的东西。阅读本文以获取有关在React中使用环境变量的更多信息。 https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5

Answer 2

您不能在客户端隐藏API_KEY。浏览器将编译所有代码，最后将发布您的API_KEY。

我认为，您可以将该API集成到后端，然后只需简单地调用自己的后端API。这是隐藏API_KEY的最佳方法。

在控制台上打印环境变量，但未定义

2 个答案: