.env文件中的API密钥401错误

Question

从我的.env文件附加API密钥时遇到问题。如果将其放置在组件中，该键将起作用。但是，如果我从.env文件导入它不起作用。获取401（未经授权）。使用了Create React App。尝试了多种尝试使其工作的方法（添加const，在变量之前添加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并将其值注入到process.env中，从而使这些值不可公开访问。

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

Answer 2

遵循此处的指导：Node.js Everywhere with Environment Variables!