React.js: Mengapakah mengakses kunci API saya daripada fail .env memerlukan awalan REACT_APP apabila menggunakannya? iaitu. (process.env.REACT_APP_API_KEY)

Question

Mengikut pemahaman saya, fail .env harus memegang kunci API dengan awalan REACT_APP diikuti dengan namanya dan untuk menggunakan pembolehubah kita perlu meninggalkan awalan REACT_APP tetapi saya perhatikan terdapat perbezaan dalam beberapa kes tingkah laku .

Saya menetapkan pembolehubah persekitaran dalam fail .env seperti ini: REACT_APP_YOUR_KEY_NAME=9999999999999. Dan dengan mengandaikan ia diakses melalui process.env.YOUR_KEY_NAME. Tetapi saya perhatikan bahawa dalam beberapa kes (bukan secara unik) awalan diperlukan, jika tidak, kuncinya kelihatan undefined. Jadi ia hanya berfungsi jika saya menggunakan process.env.REACT_APP_YOUR_KEY_NAME

const FetchData= async () =>
  cuba {
    const cache = localStorage.getItem('apiData');
    jika (cache) {
      kembalikan JSON.parse(cache);
    } lain {
      respons const = tunggu ambil(`${url}?key=${process.env.REACT_APP_API_KEY}`);
      const jsonData = menunggu respons.json();
      localStorage.setItem('gameData', JSON.stringify(jsonData));
      kembalikan jsonData;
    }
  } tangkap (ralat) {
    console.error('Ralat berlaku:', ralat);
    kembali null;
  }
};

eksport FetchData lalai;

Answer 1

Untuk semua pembolehubah persekitaran tersuai dalam aplikasi yang dibuat melalui aplikasi create-react, kita perlu menggunakan awalan REACT_APP_ dalam nama pembolehubah persekitaran, ini adalah keperluan, jika kita tidak mengikut konvensyen, pembolehubah tidak akan dapat diakses, itu sahaja, sama seperti VITE, anda perlu menggabungkan VITE_.. atau Nextjs dengan NEXT_PUBLIC... (komponen pelanggan sahaja)

Selain itu, ingat bahawa semua nilai boleh diakses pada klien (pelayar). Anda tidak boleh menggunakannya untuk sebarang data/kelayakan yang pengguna anda tidak sepatutnya mempunyai akses dalam penyemak imbas dan untuk sebarang kunci API super rahsia.

Untuk keselamatan maksimum ia harus digunakan pada bahagian belakang dan tiada awalan diperlukan pada bahagian belakang.

Untuk butiran lanjut, anda boleh menyemak dokumentasi lama (sekali lagi) di CRA https://create-react-app.dev/docs/adding-Pembolehubah persekitaran tersuai