当前位置：首页 > React

react如何设置反向代理

2026-02-26 19:30:16React

在 React 中设置反向代理

React 应用通常通过开发服务器（如 create-react-app 内置的服务器）运行，反向代理可以用于解决跨域问题或将 API 请求转发到后端服务器。以下是两种常见的设置方法：

使用 `create-react-app` 的 `proxy` 配置

在 package.json 中直接添加 proxy 字段，将 API 请求转发到目标服务器：

{
  "name": "my-react-app",
  "version": "0.1.0",
  "proxy": "http://your-backend-server.com"
}

这种方式仅适用于开发环境，所有未知路由的请求会自动转发到指定的后端服务器。

通过 `http-proxy-middleware` 配置更灵活的反向代理

如果需要更灵活的代理规则（如多目标或路径重写），可以手动创建代理配置文件：

安装 http-proxy-middleware：

react如何设置反向代理

npm install http-proxy-middleware --save

在 src 目录下创建 setupProxy.js 文件（create-react-app 会自动加载该文件）：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://your-backend-server.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  );
};

这段代码会将所有以 /api 开头的请求转发到 http://your-backend-server.com，并移除路径中的 /api 前缀。

生产环境配置

对于生产环境，反向代理通常通过 Web 服务器（如 Nginx 或 Apache）配置：

react如何设置反向代理

Nginx 示例配置：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /path/to/react/build;
        try_files $uri /index.html;
    }

    location /api {
        proxy_pass http://your-backend-server.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

这种配置会：