如何使用 React + Webpack 应用程序存储和访问我的 API 密钥？

Posted 2023-02-22

【中文标题】如何使用 React + Webpack 应用程序存储和访问我的 API 密钥？

【英文标题】：How do I store and access my API keys with a React + Webpack app?

【发布时间】：2017-05-27 19:17:08

【问题描述】：

我目前正在构建一个前端使用 React、Babel 和 Webpack 的项目。

我需要在某处存储和访问我的 API 密钥，但我不确定在哪里。

我认为我应该将我的 API 密钥存储在我的 .env 文件中，该文件位于我的 .gitignore 中。但这是在欺骗我。

根据我的阅读，webpack 似乎可以访问 yuor .env 文件中的环境变量。

但如果我这样做，是否意味着当我发出请求时，我的 API 密钥将通过浏览器 - 所以密钥将不受保护？

过去我使用的是 node express 后端服务器，因此我的 API 密钥受到保护，与浏览器无关。但是我不确定当我也有 webpack 开发服务器时是否需要这个。

我开始设置 node express 后端服务器，但不知道如何将其绑定到我的 webpack.config 或 package.json。 Webpack 已经是一个节点快递服务器！那么我有2台服务器吗？拥有第二台服务器的唯一原因是为了保护我的 API 密钥？

我真的很困惑自己，我认为不必要地复杂化了事情。

非常感谢任何帮助。

【参考方案1】：

您可以编写一个快速服务器来使用密钥进行 API 调用并提供相同的响应。以这种方式使用 express 服务器作为中介，您将永远不必在客户端公开 API 密钥。

编辑：没有读到你已经考虑过了

在这种情况下，您可以使用 webpack-dev-middleware (https://github.com/webpack/webpack-dev-middleware) 并仅使用一台快速服务器来提供 API 和静态文件。

您的代码可能如下所示：

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
// require keys

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, 
  noInfo: true,
  publicPath: config.output.publicPath
));

app.use(require('webpack-hot-middleware')(compiler));

app.get('/api', function(req, res) 
    // api logic
)

app.get(/^(?!\/api).*$/, function(req, res) 
  res.sendFile(path.join(__dirname, 'index.html'));
);

app.listen(3000, function(err) 
  if (err) 
    console.log(err);
    return;
  
  console.log('Listening at http://localhost:3000');
);