ホームページ  >  に質問  >  本文

React.js: .env ファイルから API キーにアクセスするには、使用時に REACT_APP プレフィックスが必要なのはなぜですか?つまり。 (プロセス.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 () => { 試す { const キャッシュ = localStorage.getItem('apiData'); if (キャッシュ) { JSON.parse(キャッシュ)を返します。 } それ以外 { const response = await fetch(`${url}?key=${process.env.REACT_APP_API_KEY}`); const jsonData = 応答を待ちます.json(); localStorage.setItem('gameData', JSON.stringify(jsonData)); jsonData を返します。 } } キャッチ (エラー) { console.error('エラーが発生しました:', エラー); null を返します。 } }; デフォルトの FetchData をエクスポート;</pre></p>
P粉087951442P粉087951442433日前554

全員に返信(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
  • キャンセル返事