javascript - .env 文件中出现 API key 401 错误

Question

从我的 .env 文件附加 API key 时遇到问题。如果将 key 放置在组件中，则该 key 将起作用。但是，如果我从 .env 文件导入它，它就不起作用。收到 401(未经授权)。使用创建 react 应用程序。尝试了许多不同的方法来尝试使其工作(添加 const，在 var 之前添加 REACT_APP ..)。

.env 文件...

REACT_APP_OPEN_WEATHER_API_KEY=`123456789123456789`;

.jsx 文件...

import React from "react";
import REACT_APP_OPEN_WEATHER_API_KEY from '../.env';

const REACT_APP_API_ADDRESS = REACT_APP_OPEN_WEATHER_API_KEY;

class WeatherInfo extends React.Component {

        constructor() {
            super();
            this.state = {
                items: [],
                isLoaded: false,
            }
        }
        componentDidMount() {
            
            fetch(`https://api.openweathermap.org/data/2.5/forecast?q=Austin,USA&appid=${REACT_APP_API_ADDRESS}&units=imperial`)

Answer 1

您不应该像这样加载 ENV 文件。有一个特殊的节点包对此非常有用，它可以做很多事情，但最重要的是它真正隐藏了您的 .env 并将值注入(inject)到您的 process.env 中，以便这些值不可公开访问。

https://www.npmjs.com/package/dotenv