如何使用React + Webpack应用程序存储和访问我的API密钥？
我目前正在与前端的React，Babel和Webpackbuild立一个项目。
我需要存储和访问我的API密钥，但我不知道在哪里。
我想我应该将我的API密钥存储在我的.gitignore中的.env文件中。 但是，它正在访问他们，欺骗我。
从我读过的东西看来，webpack可以访问yuor .env文件中的环境variables。
但是，如果我这样做，是不是说当我提出要求我的API密钥将通过浏览器 – 所以密钥将不受保护？
在过去，我使用了一个节点快递后端服务器，以便我的API密钥受到保护，并且与浏览器无关。 但是我不确定当我有一个webpack dev服务器时是否需要这个。
我开始build立一个expression后端服务器的节点，但是不知道如何将这个绑定到我的webpack.config或package.json中。 Webpack已经是一个节点快递服务器！ 那么我有2个服务器？ 有第二台服务器保护我的API密钥的唯一原因？
我真的很困惑自己，我觉得不必要的复杂的事情。
任何帮助将非常感激。
您可以编写一个快速服务器来使用密钥进行API调用，并提供相同的响应。 以这种方式使用快速服务器作为中介，您将永远不必公开客户端的API密钥。
编辑：没有读你已经想过了
在这种情况下，您可以使用webpack-dev-middleware（ https://github.com/webpack/webpack-dev-middleware ）并使用一个express服务器来提供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'); });