部署ReactJS+NodeJS应用时，React端环境变量（含密钥）如何处理？

核心原则 #

永远不要在React客户端代码中存放敏感API密钥或机密信息。因为React是客户端渲染框架，最终所有代码都会被打包成静态文件（JS/CSS/HTML），任何人都可以通过浏览器开发者工具查看源码，无论你怎么处理，只要敏感信息出现在客户端代码里，就一定会暴露。

可行解决方案 #

1. 用NodeJS后端做代理层（最安全的方案）

让React客户端不直接调用第三方API，而是请求你自己的Node后端接口，由后端持有敏感密钥并完成第三方API调用，再将结果返回给React。这样敏感信息全程只在服务端流转，不会出现在客户端代码中。

示例代码：

• Node后端（Express）路由：

// server.js
require('dotenv').config();
const express = require('express');
const axios = require('axios');
const app = express();

// 代理第三方API请求
app.get('/api/third-party/data', async (req, res) => {
  try {
    // 从服务端.env读取敏感密钥
    const apiKey = process.env.THIRD_PARTY_API_KEY;
    // 后端调用第三方API
    const response = await axios.get('https://third-party-api.com/data', {
      headers: { 'Authorization': `Bearer ${apiKey}` }
    });
    // 将结果返回给React客户端
    res.json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).json({ error: err.message });
  }
});

// 托管React静态文件（部署时用）
app.use(express.static('client/build'));

app.listen(5000, () => console.log('Server running on port 5000'));

• React客户端请求：

// React组件内
const fetchData = async () => {
  try {
    // 请求自己的后端接口，而非第三方API
    const response = await fetch('/api/third-party/data');
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error('请求失败:', err);
  }
};

2. 严格区分客户端与服务端环境变量

• React项目中，只有非敏感配置适合放在客户端环境变量中（比如API基础路径、前端功能开关等），且必须以REACT_APP_为前缀（Create React App的规则），比如REACT_APP_API_BASE_URL=http://your-domain.com/api。
• 所有敏感信息（API密钥、数据库密码等）必须存放在Node后端的.env文件中，且后端代码要确保这些变量不会被返回给客户端。

3. 为什么提前移服务端.env没用？

React的npm build过程是在客户端项目中执行的，只会读取客户端项目的环境变量，不会读取服务端的.env文件。如果你的React代码中仍然引用了敏感变量，build时要么会因变量缺失报错，要么会使用默认值，而如果之前已经将敏感变量硬编码到代码中，依然会被打包进静态文件暴露出去。

额外注意事项 #

• 不要尝试通过混淆、加密客户端代码来隐藏敏感信息，这种方式只能增加获取难度，无法从根本上解决问题，懂行的开发者依然可以破解。
• 如果必须在客户端使用某些公开密钥（比如Google Maps API密钥），一定要在第三方平台设置密钥的使用限制（比如绑定你的域名、限制API调用权限），降低被滥用的风险。

内容的提问来源于stack exchange，提问作者Eric Winkelspecht