基于React框架的axios跨域问题解决方案:配置代理

文章介绍了如何在服务端只有一个或多个端口并与客户端不同域的情况下,使用axios库和package.json的proxy配置来实现客户端向不同服务端口的请求转发。具体涉及到了URL参数的拼接和配置文件的设置。
摘要由CSDN通过智能技术生成

1.服务端只有一个端口且与客户端域不同时

客户端端口是http://localhost:8080/,如果服务端(server)就一个端口时,例如:http://localhost:5000/,只需要在package.json文件中添加配置 "proxy":'http://localhost:5000'  就行了

2.服务端有多个端口时且与客户端域不同时

客户端端口是http://localhost:8080/,服务端1(server1)端口:http://localhost:5000/,服务端2(server2)端口:http://localhost:5001/ 。在文件中配置如下:

Client 使用axios向http://localhost:5000/ 发送请求时需要在axios.get函数中传入url参数http://localhost:3000(客户端地址)后面拼接配置项中所对应的参数在这里是/api1 ,同理,如果向服务器端口httpp://localhost:5001发送请求时需要在axios.get函数中传入url参数http://localhost:3000(客户端地址)后面拼接配置项中所对应的参数在这里是/api2。如下图所示:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值