React/Express应用部署：如何通过Web服务器路由API请求保护接口隐私

当然有简单靠谱的方案！你已经用到了反向代理的思路，只需要把这个逻辑延伸到API请求上就行——让你的Web服务器帮前端转发API请求，这样客户端完全不知道私有API服务器的存在，API也不会暴露到公网。下面给你两个最常用的实现方式：

方案1：Nginx反向代理（生产环境首选） #

这是最成熟的生产级方案，Nginx性能强，还能顺便处理SSL、缓存等额外需求。

配置步骤： #

1. 确保你的API服务器只监听本地地址（127.0.0.1），不要绑定0.0.0.0，这样外部网络根本访问不到它。
2. 修改Nginx配置，让它同时处理React静态文件和API请求转发：

server {
    listen 80;
    server_name your-domain.com; # 替换成你的目标域名

    # 托管React打包后的静态文件
    root /path/to/your/react/build/folder; # 替换为React build文件夹的绝对路径
    index index.html;

    # 转发所有/api开头的请求到私有API服务器
    location /api/ {
        proxy_pass http://localhost:3001/; # 指向本地的API服务器
        # 传递必要的请求头，避免API服务器识别异常
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 处理React单页应用的路由 fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 重启Nginx生效：sudo systemctl restart nginx

效果：前端发起的/api/xxx请求会被Nginx偷偷转发到http://localhost:3001/api/xxx，客户端看到的始终是your-domain.com/api/xxx，完全不知道背后的3001端口存在。

方案2：Express内置代理（简化部署方案） #

如果你的Web服务器本身就是Express（比如你把React打包后直接放到Express项目里托管），可以直接用代理中间件实现，不用额外部署Nginx。

配置步骤： #

1. 同样确保API服务器只监听127.0.0.1。
2. 把React打包后的build文件夹放到Express项目中（比如命名为public/build）。
3. 安装代理中间件：

npm install http-proxy-middleware

4. 修改Express主文件（比如app.js）：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const path = require('path');

const app = express();

// 转发/api请求到本地API服务器
app.use('/api', createProxyMiddleware({
  target: 'http://localhost:3001',
  changeOrigin: true, // 确保API服务器能正确识别请求来源
}));

// 托管React静态文件
app.use(express.static(path.join(__dirname, 'public/build')));

// SPA路由 fallback
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/build/index.html'));
});

// 启动Web服务器（监听公网地址，方便反向代理对接）
app.listen(3000, '0.0.0.0', () => {
  console.log('Web server running on port 3000');
});

效果：Express既负责提供React静态资源，又会把所有/api开头的请求转发到本地的3001 API服务器，和Nginx方案的效果完全一致。

关键注意点 #

• 前端的API请求地址要改成相对路径：比如把原来的http://localhost:3001/api/xxx改成/api/xxx，这样部署后会自动使用当前域名的/api路径，不用额外修改配置。
• API服务器一定要绑定127.0.0.1：这样它只会响应本地请求，外部网络无法直接访问，彻底保证私有性。
• 如果用Nginx，记得关闭3001端口的外部访问权限（不过绑定127.0.0.1的话，这一步其实可以省略，因为端口根本没对外开放）。

这两个方案都非常容易实现，你可以根据自己的部署环境选择——生产环境优先选Nginx，想简化流程就用Express内置代理。

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