Ant Design Pro中的Proxy跨域代理

本文详细讲解了如何在AntDesignPro和项目配置中设置代理,实现如 '/api' 到实际URL的映射,并演示了路径重写技巧,以便正确访问资源。

看官方文档中的例子

Ant Design Pro官网中给的例子

export default {
  proxy: {
    '/api': {
      'target':'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      'pathRewrite': {'^/api':'' },
    },
  },
}
proxy: {

	api表示的是在/api路径下开启代理
    '/api': {
    
  	 //target表示的是要替换的地址
      'target':'http://jsonplaceholder.typicode.com/',
      
      'changeOrigin': true,
      
      //将api开头替换为空
      'pathRewrite': {'^/api':'' },
    },
  },

实际使用

在config文件夹下的config.js
在这里插入图片描述

项目中使用

  proxy: {
    "/ci": {
      "target": "http://47.92.112.6:8055",
      "changeOrigin": true,
      "pathRewrite": { "^/ci": ''}
    }
  }

比如
我在本地访问的是

http://localhost:8000/ci/player/page?current=2&size=10

进入ci路径下会自动开启代理
将http://localhost:8000替换成了http://47.92.112.6:8055
此时我访问的就是

http://47.92.112.6:8055/ci/player/page?current=2&size=10

但是我应该访问的是

http://47.92.112.6:8055/player/page?current=2&size=10

所以这时候要进行路径重写,将ci替换为空就可以成功访问

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值