React项目中如何隐藏Python Flask微服务API请求地址？

完全可以通过代理方案实现你的需求，让浏览器仅显示前端域名的请求地址，同时将请求转发到后端Flask服务。下面分开发环境和生产环境两种场景说明具体实现方式：

开发环境配置 #

React官方提供了内置的代理支持，也可以通过自定义规则实现更灵活的转发：

1. 基础代理配置 #

在React项目的package.json中添加proxy字段，直接指向你的Flask服务地址：

{
  "name": "your-react-app",
  "proxy": "http://localhost:5001",
  // 其他项目配置...
}

配置完成后重启React开发服务器，前端代码中直接请求相对路径即可：

// 前端请求代码
const response = await fetch('/api/users');

此时浏览器网络面板会显示请求地址为http://localhost:3000/api/users，实际请求会被自动转发到http://localhost:5001/api/users。

2. 自定义路径重写 #

如果需要将前端的/users路径转发到后端的/api/users，可以创建src/setupProxy.js文件（需先安装依赖：npm install http-proxy-middleware --save-dev），添加以下代码：

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

module.exports = function(app) {
  app.use(
    '/users',
    createProxyMiddleware({
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: { '^/users': '/api/users' } // 重写请求路径
    })
  );
};

此时前端调用fetch('/users')，浏览器显示的是http://localhost:3000/users，实际请求会转发到http://localhost:5001/api/users。

生产环境配置 #

生产环境无法依赖React开发服务器的代理，需要使用反向代理工具（如Nginx）实现转发：

Nginx配置示例 #

编辑Nginx配置文件，添加以下规则：

server {
  listen 3000;
  server_name localhost;

  # 处理API请求转发
  location /users {
    proxy_pass http://localhost:5001/api/users;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  # 提供React静态文件服务（指向打包后的build目录）
  location / {
    root /path/to/your/react/build;
    try_files $uri $uri/ /index.html;
  }
}

配置完成后重启Nginx，用户访问http://localhost:3000/users时，Nginx会自动将请求转发到Flask服务的/api/users接口，浏览器网络面板只会显示前端的3000端口地址。

你也可以选择将React打包后的静态文件部署到Flask服务中，让前后端共用同一端口，但这种方式在复杂项目中扩展性较差，反向代理仍是更推荐的方案。

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