当前位置：首页 > React

react如何配置反向代理

2026-03-31 16:52:57React

在 React 中配置反向代理

React 应用通常通过开发服务器（如 create-react-app 内置的服务器）运行，反向代理可以解决跨域问题或对接后端服务。以下是配置方法：

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

修改 package.json 文件，添加 proxy 字段指向后端服务地址：

{
  "name": "react-app",
  "version": "1.0.0",
  "proxy": "http://localhost:5000"
}

重启开发服务器后，所有未知请求会自动代理到 http://localhost:5000。

通过 `http-proxy-middleware` 自定义代理规则

如果需要更灵活的代理规则（如多路径代理），可以手动配置：

安装依赖：

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://localhost:5000',
      changeOrigin: true,
    })
  );

  app.use(
    '/uploads',
    createProxyMiddleware({
      target: 'http://localhost:6000',
      changeOrigin: true,
    })
  );
};

生产环境配置

开发环境的代理仅对本地开发服务器有效。生产环境需通过 Web 服务器（如 Nginx）配置反向代理：

react如何配置反向代理

server {
  listen 80;
  server_name yourdomain.com;

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

  location /api {
    proxy_pass http://backend:5000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}