Ant Design Pro 5项目初始化后，默认是使用mock模拟数据的，如果我们关闭mock，配置代理访问后端进行数据联调，那么配置方法如下：

修改config目录中的proxy.ts（这里以typescript版本示例，javascript版本也一样）。

将test配置中的内容复制到dev中，然后按照实际情况修改后端链接。

/**
 * @name 代理的配置
 * @see 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
 * -------------------------------
 * The agent cannot take effect in the production environment
 * so there is no configuration of the production environment
 * For details, please see
 * https://pro.ant.design/docs/deploy
 *
 * @doc https://umijs.org/docs/guides/proxy
 */
export default {
  dev: {
    '/api/': {
      target: 'http://localhost:8081',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  /**
   * @name 详细的代理配置
   * @doc https://github.com/chimurai/http-proxy-middleware
   */
  test: {
    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
    '/api/': {
      target: 'http://localhost:8081',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'your pre url',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};

配置完成后等待npm重新加载，之后项目中对localhost:8000/api/**的所有请求都会转发的对应的http://localhost:8081/api/**中。注意，配置了 proxy 之后，浏览器内的请求路径不会变，但实际请求的地址已被反向代理到后者。

(adsbygoogle = window.adsbygoogle || []).push({});