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 之后,浏览器内的请求路径不会变,但实际请求的地址已被反向代理到后者。