Question

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

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

我想我应该将API密钥存储在我的.env文件中，该文件位于我的.gitignore中。但它正在访问那些欺骗我的人。

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

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

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

我开始设置一个节点快速后端服务器，但后来却不知道如何将它绑定到我的webpack.config或package.json中。 Webpack已经是一个节点快递服务器了！我有2台服务器吗？唯一的理由是让第二台服务器保护我的API密钥？

我真的很困惑自己，我觉得不必要地使事情复杂化。

非常感谢任何帮助。

Answer 1

您可以编写一个快速服务器来使用密钥进行API调用并提供相同的响应。以这种方式使用快速服务器作为中介，您将永远不必在客户端公开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');
});

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

1 个答案: