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

我需要在某个地方存储和访问我的API密钥,但是我不确定在哪里。

我想我应该将API密钥存储在.env文件中,该文件位于.gitignore中。但是访问它们使我很困惑。

从我阅读的内容来看,似乎webpack可以访问yuor .env文件中的环境变量。

但是,如果这样做,这是否意味着我发出请求时,我的API密钥将通过浏览器-从而使这些密钥不受保护?

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

我开始设置节点快速后端服务器,但后来不知道如何将其绑定到我的webpack.config或package.json中。 Webpack已经是一个节点快递服务器!那我有2台服务器吗?拥有第二台服务器的唯一原因是要保护我的API密钥?

我真的使自己感到困惑,并且我认为不必要地使事情复杂化。

任何帮助将不胜感激。

最佳答案

您可以编写一个快速服务器来使用密钥进行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');
});

10-05 20:51
查看更多