我的 API 密钥未定义，即使它位于 .env 文件和全局变量中

Question

尝试从API获取数据时，我使用的密钥被认为是"未定义的"。我的密钥之所以有效，是因为我将网络控制台中的 {key=undefined} 替换为实际字符串，并且我能够获取所需的数据。有什么想法吗？另外，我知道您不应该在 React 应用程序中隐藏任何 API 密钥，但我只是将其用于测试目的。如果它有助于澄清事情，我确实使用了 Create-React-App，并且他们在过去 3 个月中确实进行了重大更新，所以我想知道这是否与此有关。

     const bartKey = process.env.REACT_API_BART_API_KEY;
     console.log(`Api key: ${process.env.REACT_API_BART_API_KEY}` );
     //inside class Component
     async getAllStations(){
        try{
            const response = await fetch(`http://api.bart.gov/api/etd.aspx?cmd=etd&orig=${this.state.selectedStation}&key=${bartKey}&json=y`);
            // console.log(response.json());
            const data = await response.json();
            console.log('Initial data: ', data);
            // fetch(`http:api.bart.gov/api/etd.aspx?cmd=etd&orig=${this.state.selectedStation}&key=${bartKey}&json=y`)
            //     .then(response => response.json())
            //     .then(data => console.log(`here: ${data}`))
        }catch(e){
            console.log(`Error: ${e}`)
        }
    }

Answer 1

这

在使用create-react-app时对我有用：

而不是REACT_API_BART_API_KEY在 .env 中使用REACT_APP_BART_API_KEY

然后你可以称之为process.env.REACT_APP_BART_API_KEY

从创建反应应用程序文档 https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables 中检查此网址

Answer 2

如果您的 .env 文件工作奇怪，我会说一个非常好的解决方案是制作一个配置文件。将 API 密钥保留在那里。将该文件放在 git ignore 中，它将以相同的方式隐藏，并且肯定会工作。

Answer 3

此更改帮助我解决了我的问题：

请注意，dotenv 是一个零依赖模块，它将环境变量从.env文件加载到 process.env 中。所以你应该首先下载这个包：

1 步： npm install dotenv --save-dev

将 webpack 和 dotenv 导入 webpack.config.js 文件中并进行以下更改：

确保 module.导出一个函数后，该函数首先生成环境键 ：

生成密钥时，请使用webpack.DefinePlugin()这将有助于为应用生成全局常量。

// other imports
const dotenv = require('dotenv');
const webpack = require('webpack');
module.exports = () => {
    const env = dotenv.config().parsed;
    const envKeys = Object.keys(env).reduce((prev, next) => {
        prev[`process.env.${next}`] = JSON.stringify(env[next]);
        return prev;
    }, {});
    return {
        /* ... here should be your previous module.exports object attributes */
        entry: ['babel-polyfill', './src/index.js'],
        output: {
            path: path.join(__dirname, 'build'),
            filename: 'bundle.js',
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./public/index.html",
                filename: "./index.html"
            }),
            new webpack.DefinePlugin(envKeys)
        ]
    }
};

另请注意，在日志记录process.env您仍然会得到空对象或什么都没有。但是如果你process.env.YOU_KEY登录，那么你的键值就会被字符串化

希望对您有所帮助！

Answer 4

在您的应用程序中，尽早要求并配置 dotenv。(https://www.npmjs.com/package/dotenv(

require('dotenv').config()

您应该在程序中尽早编写该行。