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

【问题标题】：How do I store and access my API keys with a React + Webpack app?如何使用 React + Webpack 应用程序存储和访问我的 API 密钥？
【发布时间】：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 密钥？

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

非常感谢任何帮助。

【问题讨论】：

标签： node.js reactjs express webpack webpack-dev-server

【解决方案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');
});

【讨论】：