React.js：为什么使用它时从 .env 文件访问我的 API 密钥需要 REACT_APP 前缀？ IE。 (process.env.REACT_APP_API_KEY)

Question

根据我的理解，.env 文件应该保存带有 REACT_APP 前缀的 API 密钥，后跟其名称，并且要使用该变量，我们必须省略 REACT_APP 前缀，但我注意到在某些情况下有不同的行为。

我在 .env 文件中设置环境变量，如下所示：REACT_APP_YOUR_KEY_NAME=9999999999999。并假设它是通过 process.env.YOUR_KEY_NAME 访问的。但我注意到在某些情况下（不是唯一的）需要前缀，否则键看起来是未定义。因此，它仅在我使用 process.env.REACT_APP_YOUR_KEY_NAME 时才有效。

const FetchData= async () => {
  try {
    const cache = localStorage.getItem('apiData');
    if (cache) {
      return JSON.parse(cache);
    } else {
      const response = await fetch(`${url}?key=${process.env.REACT_APP_API_KEY}`);
      const jsonData = await response.json();
      localStorage.setItem('gameData', JSON.stringify(jsonData));
      return jsonData;
    }
  } catch (error) {
    console.error('Error occurred:', error);
    return null;
  }
};

export default FetchData;

Answer 1

对于通过create-react-app创建的应用程序中的所有自定义环境变量，我们需要在环境变量名称中使用REACT_APP_前缀，这是一个要求，如果我们不遵循约定，变量将无法访问，就是这样，就像 VITE 一样，您需要将 VITE_.. 或 Nextjs 与 NEXT_PUBLIC...（仅限客户端组件）

此外，请记住所有值都可以在客户端（浏览器）上访问。您不应将其用于您的用户不应在浏览器中访问的任何数据/凭证以及任何超级秘密 Api 密钥。

为了获得最大的安全性，应该在后端使用它，并且后​​端不需要任何前缀。

有关更多详细信息，您可以（再次）查看 CRA 上的旧文档 https://create-react-app.dev/docs/adding-自定义环境变量