Ant Design Pro 配置代理

本文介绍了前端跨域问题的由来,包括浏览器的同源策略及其限制,并提出了解决跨域的三种方法,重点讲解了使用代理作为解决方案。通过Ant Design Pro的proxy.js配置示例,详细阐述了如何设置代理以解决开发过程中的接口调用问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,我们可能有一个疑问,就是为什么要使用代理呢?

作为一名前端开发人员,在普遍使用前后端开发的时代,跨域是不可避免的问题。可能又有小伙伴问了,什么是跨域呢?我们在这里简单聊一下吧。

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的的同源策略造成的,是浏览器对用户安全的一种策略限制。

同源策略限制了哪些行为呢?
1、Cookie、LocalStorage 和 IndexDB 无法读取
2、DOM 和 JS 对象无法获取
3、Ajax 请求发送不出去

我们就着重关心第3条,Ajax 发送不出去怎么办?

自然而然会问,怎么样才能让 Ajax 发送出去呢?带着问题,我们看下面这个简单的绘图。


当我们直接从aaa网站请求百度接口时,由于域名不相同(也有可能是协议、端口不相同),浏览器会阻止本地网站向百度发起ajax请求,也就是同源策略。

现在我们既然知道了,两个不同协议、域名、端口的网站,ajax互相请求会被浏览器阻止。那我们该怎么解决前端跨域问题呢?

解决办法有三个:
1、jsonp方式、缺点:它只支持GET请求,而不支持POST等其它请求
2、让后端开启CORS跨源资源共享
3、代 理
聊到这里,“主人公”代理就要登场了。

上面也谈到了,同源策略的跨域问题,主要是在浏览器与浏览器端产生的,那我们能不能找一个类似“中间商”的代理服务器呢?答案是肯定的。


由于aaa网站与baidu网站没有直接互相访问,所以跨域问题也就解决了。

既然跨域问题解决了,那我们一起看看 Ant Design Pro 的代理如何配置吧。

位置:/config/proxy.js

/**
 * 在生产环境 代理是无法生效的,所以这里没有生产环境的配置
 * 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
 */
export default {
    
  dev: {
    
    '/api/': {
    
      target: 
Ant Design Pro代理配置可以在两个地方进行设置。首先,在/config/proxy.js文件中,可以根据不同的环境(开发、测试、预发布)配置代理。例如,在开发环境中,可以将/api/路径代理到https://preview.pro.ant.design。\[1\] 其次,在/config/config.ts文件中,可以使用proxy字段进行代理配置。例如,可以将以/service/api开头的路由代理到http://154.26.140.15:8000,并开启跨域访问。\[2\] 另外,还可以使用请求拦截的方法进行代理配置。在请求拦截器中,可以根据环境变量判断是生成环境还是本地环境,然后设置不同的baseUrl。例如,如果是生成环境,baseUrl为http://154.26.140.15:8000;如果是本地环境,baseUrl为/service。\[3\] #### 引用[.reference_title] - *1* [Ant Design Pro 配置代理](https://blog.csdn.net/yyy_react/article/details/130063956)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [ant design pro 代理](https://blog.csdn.net/qq_39167934/article/details/105992924)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值