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

【问题标题】：Error with API Key 401 error in .env file.env 文件中的 API 密钥 401 错误
【发布时间】：2019-01-22 17:19:34
【问题描述】：

从我的 .env 文件中附加 API 密钥时遇到问题。如果将密钥放置在组件中，则该密钥将起作用。但是，如果我从 .env 文件中导入它，它就不起作用。获得 401（未经授权）。使用了 Create React App。尝试了许多不同的方法来尝试使其工作（添加 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`)

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：