当前位置：首页 > React

react如何配置反向代理

2026-03-10 17:27:11React

配置反向代理的方法

在React项目中配置反向代理通常用于解决开发环境中的跨域问题，或与后端API对接。以下是常见配置方法：

使用`http-proxy-middleware`

React项目默认支持通过http-proxy-middleware实现代理，适用于create-react-app创建的项目。

安装依赖（若未自动安装）：

npm install http-proxy-middleware --save

在src目录下创建setupProxy.js文件（无需手动引入，React会自动加载）：

react如何配置反向代理

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

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

参数说明：
- target: 后端服务器地址。
- changeOrigin: 修改请求头中的Host为目标地址。
- pathRewrite: 重写路径（如移除/api前缀）。

修改`package.json`的`proxy`字段

适用于简单场景，仅需在package.json中添加：

react如何配置反向代理

{
  "proxy": "http://your-backend-server.com"
}

注意：此方式仅能代理单一地址，且无法配置路径重写等高级功能。

开发服务器配置（如Vite）

若使用Vite构建工具，需在vite.config.js中配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://your-backend-server.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
});

Nginx生产环境代理

部署时可通过Nginx配置反向代理：

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

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

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