React.js: Warum erfordert der Zugriff auf meinen API-Schlüssel über eine .env-Datei das Präfix REACT_APP, wenn ich diese verwende? dh. (process.env.REACT_APP_API_KEY)

Question

Nach meinem Verständnis sollte die .env-Datei den API-Schlüssel mit dem Präfix REACT_APP gefolgt von seinem Namen enthalten und um die Variable zu verwenden, müssen wir das Präfix REACT_APP weglassen, aber mir ist aufgefallen, dass es in einigen Fällen einen Unterschied im Verhalten von gibt .

Ich habe die Umgebungsvariable in der .env-Datei wie folgt festgelegt: REACT_APP_YOUR_KEY_NAME=9999999999999. Und vorausgesetzt, der Zugriff erfolgt über process.env.YOUR_KEY_NAME. Mir ist jedoch aufgefallen, dass in einigen Fällen (nicht eindeutig) ein Präfix erforderlich ist, da der Schlüssel sonst wie undefiniert aussieht. Es funktioniert also nur, wenn ich process.env.REACT_APP_YOUR_KEY_NAME verwende.

const FetchData= async () =>
  versuchen {
    const Cache = localStorage.getItem('apiData');
    if (cache) {
      return JSON.parse(cache);
    } anders {
      const Response =wait fetch(`${url}?key=${process.env.REACT_APP_API_KEY}`);
      const jsonData = waiting Response.json();
      localStorage.setItem('gameData', JSON.stringify(jsonData));
      jsonData zurückgeben;
    }
  } Catch (Fehler) {
    console.error('Fehler aufgetreten:', Fehler);
    null zurückgeben;
  }
};

Standard-FetchData exportieren;

Answer 1

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

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

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

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