React.js：为什么使用它时从 .env 文件访问我的 API 密钥需要 REACT_APP 前缀？ IE。 (process.env.REACT_APP_API_KEY)
P粉087951442
2023-09-03 10:01:01
<p>根据我的理解，.env 文件应该保存带有 REACT_APP 前缀的 API 密钥，后跟其名称，并且要使用该变量，我们必须省略 REACT_APP 前缀，但我注意到在某些情况下有不同的行为。</p>
<p>我在 .env 文件中设置环境变量，如下所示：<code>REACT_APP_YOUR_KEY_NAME=9999999999999</code>。并假设它是通过 process.env.YOUR_KEY_NAME 访问的。但我注意到在某些情况下（不是唯一的）需要前缀，否则键看起来是<code>未定义</code>。因此，它仅在我使用 <code>process.env.REACT_APP_YOUR_KEY_NAME</code> 时才有效。</p>
<pre class="brush:php;toolbar:false;">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;</pre></p>
对于通过create-react-app创建的应用程序中的所有自定义环境变量，我们需要在环境变量名称中使用REACT_APP_前缀，这是一个要求，如果我们不遵循约定，变量将无法访问，就是这样，就像 VITE 一样，您需要将 VITE_.. 或 Nextjs 与 NEXT_PUBLIC...（仅限客户端组件）
此外，请记住所有值都可以在客户端（浏览器）上访问。您不应将其用于您的用户不应在浏览器中访问的任何数据/凭证以及任何超级秘密 Api 密钥。
为了获得最大的安全性，应该在后端使用它，并且后端不需要任何前缀。
有关更多详细信息，您可以（再次）查看 CRA 上的旧文档 https://create-react-app.dev/docs/adding-自定义环境变量