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

问题描述

从我的 .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`)

标签： javascriptreactjs

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

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

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

问题描述

解决方案

推荐阅读