React前端Environment Variable.js文件暴露：如何隐藏使其不被浏览器检查到

核心逻辑 #

前端代码运行在客户端环境中，任何直接嵌入到前端代码里的变量都能被浏览器解析读取，所以不能把后端URL这类需要隐藏的地址直接放在前端环境变量中，正确的做法是通过后端中转/代理的方式间接访问。

方案1：开发环境用React内置代理 #

在项目根目录的package.json中添加代理配置，将前端请求自动转发到后端：

{
  "name": "your-react-app",
  "proxy": "https://真实后端地址.com"
}

之后前端发起请求时直接写相对路径，比如fetch('/api/get-data')，开发服务器会自动把请求转发到配置的后端地址，前端代码里不会出现真实的后端URL，自然不会被暴露。

方案2：生产环境用Nginx反向代理 #

如果用Nginx部署前端，在Nginx配置文件中添加反向代理规则：

server {
  listen 80;
  server_name 你的前端域名.com;

  # 转发后端请求
  location /api {
    proxy_pass https://真实后端地址.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  # 托管前端静态文件
  location / {
    root /你的React打包文件路径/build;
    try_files $uri $uri/ /index.html;
  }
}

前端依然用相对路径发起请求，Nginx会自动把/api开头的请求转发到后端，前端代码中完全不会出现真实的后端地址。

方案3：自建中间层后端转发 #

如果有自己的中间层服务（比如Node.js、Java服务），让前端先请求中间层，再由中间层转发到目标后端。真实的后端URL只存储在中间层服务中，客户端完全无法接触到。

举个Node.js中间层的简单示例：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/get-data', async (req, res) => {
  // 真实后端地址只在中间层保存
  const backendUrl = 'https://真实后端地址.com';
  const response = await axios.get(`${backendUrl}/api/get-data`);
  res.send(response.data);
});

app.listen(3001);

前端只需请求http://中间层地址:3001/api/get-data即可，完全看不到真实的后端URL。

重要提醒 #

• 不要尝试对前端环境变量做“加密”处理，因为前端代码需要解密才能使用，解密逻辑和密钥必然也在前端代码中，等于无效加密。
• 所有需要保密的信息，绝对不能直接放在前端代码或前端环境变量里，必须通过后端中转。

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