当前位置：首页 > React

react dva开发如何使用配置代理

2026-01-25 21:29:58React

配置代理的基本方法

在 React DVA 项目中配置代理可以通过修改 config/proxy.js 文件实现。DVA 基于 Umi，因此支持 Umi 的代理配置方式。

新建或修改 config/proxy.js 文件，内容如下：

export default {
  '/api': {
    target: 'http://your-backend-server.com',
    changeOrigin: true,
    pathRewrite: { '^/api': '' },
  },
}

多环境代理配置

对于不同环境（开发、测试、生产）的代理配置，可以通过环境变量区分：

react dva开发如何使用配置代理

const { REACT_APP_ENV } = process.env;

export default {
  '/api': {
    target: REACT_APP_ENV === 'dev' 
      ? 'http://dev.server.com' 
      : 'https://prod.server.com',
    changeOrigin: true,
  },
}

Mock 数据与代理结合

当需要部分接口走 Mock 数据，部分走真实代理时，可以配置 config/config.js：

export default {
  proxy: {
    '/api': {
      target: 'http://real-server.com',
      bypass: function(req) {
        if(req.path === '/api/special') return '/mock/special';
      }
    },
  },
}

代理验证配置

为确保代理安全性，可以添加身份验证：

react dva开发如何使用配置代理

export default {
  '/api': {
    target: 'http://secure.server.com',
    auth: 'username:password',
    secure: false,
  },
}

Webpack DevServer 代理

如果项目直接使用 Webpack 配置，可以在 webpack.config.js 中设置：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      ws: true,
    },
  },
}

路径重写规则

复杂的路径重写需求可以通过函数处理：

export default {
  '/api': {
    target: 'http://complex.server.com',
    pathRewrite: function(path, req) {
      return path.replace('/api/v1', '/v2/api');
    }
  },
}