首页  >  问答  >  正文

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

<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>
P粉087951442P粉087951442435 天前556

全部回复(1)我来回复

  • P粉333186285

    P粉3331862852023-09-04 08:17:05

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

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

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

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

    回复
    0
  • 取消回复