antd-pro 配置请求代理

在antd-pro项目中,使用fetch进行HTTP请求时,本地开发需配置代理以联调后端服务。通过修改config/config.js文件添加代理设置,如changeOrigin选项。changeOrigin通常设为true,确保正确传递Host头给虚拟主机。遇到代理问题,可尝试使用npm run start:no-mock命令。

新项目中使用antd-pro框架,所以接下来会写一些关于antd-pro的踩坑

antd-pro中用的是fetch来实现http请求,封装成功一个request方法,在本地联调的时候需要该代理,通过本地服务器来请求后端服务,在部署到线上时需要使用nginx做反向代理

需要在config/config.js 添加下面代码

    proxy: {
      '/api/': {  //匹配所有以/api/为开头的接口
        target: 'http://xxxx/', //后端服务器地址
        changeOrigin: true,  
        pathRewrite: { '^/api/': '' },  //因为我们项目的接口前面并没有api 所以直接去掉
      },
    },

关于changeOrigin这个选项:

如果后端服务托管在虚拟主机的时候,也就是一个IP对应多个域名,需要通过域名区分服务,那么参数changeOrigin必须为true(默认为false),这样才会传递给后端正确的Host头,虚拟主机才能正确回应。否则http-proxy-middleware会原封不动将本地HTTP请求发往后端,包括Host: localhost而不是Host: httpbin.org,只有正确的Host才能使用虚拟主机,不然会返回404 Not Found。

一般情况下直接设置为true就可以了

可能会遇到挂设代理还是无法请求真实接口的情况,可以用 npm run start:no-mock 试试看

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值