React.js: .env 파일에서 API 키에 액세스하려면 API 키를 사용할 때 REACT_APP 접두사가 필요한 이유는 무엇입니까? 즉. (process.env.REACT_APP_API_KEY)
P粉087951442
P粉087951442 2023-09-03 10:01:01
0
1
430
<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 (캐시) { return JSON.parse(캐시); } 또 다른 { const 응답 = 가져오기를 기다립니다(`${url}?key=${process.env.REACT_APP_API_KEY}`); const jsonData = 응답을 기다립니다.json(); localStorage.setItem('gameData', JSON.stringify(jsonData)); jsonData를 반환합니다. } } 잡기(오류) { console.error('오류가 발생했습니다:', error); null을 반환; } }; 기본 FetchData 내보내기;</pre></p>
P粉087951442
P粉087951442

모든 응답(1)
P粉333186285

create-react-app을 통해 생성된 애플리케이션의 모든 사용자 정의 환경 변수의 경우 환경 변수 이름에 REACT_APP_ 접두사를 사용해야 합니다. 이는 필수 사항입니다. 규칙을 따르지 않으면 변수에 액세스할 수 없습니다. 그게 다입니다. VITE와 마찬가지로 VITE_.. 또는 Nextjs를 NEXT_PUBLIC...(클라이언트 측 구성 요소에만 해당)과 결합해야 합니다.

또한 모든 값은 클라이언트(브라우저)에서 접근 가능하다는 점을 기억하세요. 사용자가 브라우저에서 액세스할 수 없는 데이터/자격 증명 및 극비 API 키에는 이를 사용해서는 안 됩니다.

보안을 극대화하려면 백엔드에서 사용해야 하며 백엔드에는 접두사가 필요하지 않습니다.

자세한 내용은 CRA에서 이전 문서를 다시 확인하세요. https://create-react-app.dev/docs/adding-사용자 정의 환경 변수

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!