最近在使用Arco Design+Vue进行一个后台管理系统的开发,目前后端的API与前端不在同一台ip上,直接进行请求会出现跨域问题

介绍

使用arco init hello-arco-pro命令配置好的Arco Design Pro项目是通过Vite进行启动的,Vite在进行配置的时候,可以对前端服务器的代理规则进行自定义配置,实现跨域API的访问请求。Vite Proxy的大致原理可以参考下图(源自CSDN@南木元元

配置方法

在Arco Design Pro的项目目录中,通常会存在一个config文件夹hello-arco-pro/config,config目录结构如下:

1
2
3
4
5
6
config
├── plugin
├── utils
├── vite.config.base.ts
├── vite.config.dev.ts
└── vite.config.prod.ts

打开vite.config.dev.ts文件(通常来说使用npm run dev命令调用的就是这个配置文件),在server选项下添加proxy(如果没有server则手动添加):

1
2
3
4
5
6
7
8
9
server: {
proxy: {
'/api1': {
target: 'http://10.0.0.60:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api1/, ''),
},
},
}

这里表示所有对/api1的访问都会被代理转换为对http://10.0.0.60:8080的访问,使用rewrite会将原有aAPI请求中的'/api1'替换为'',例如在前端Vue代码中所请求的API为/api1/dashboard/workplace,通过代理会被转换为实际上是对http://10.0.0.60:8080/dashboard/workplace的访问,以此来解决跨域问题

[!NOTE]

通常来说一个Vite代理的配置到这里就可以结束了,但是我在自己配置的时候,配置完依然不能实现跨域访问,会出现 (failed)net::ERR_CONNECTION_REFUSED错误状态,查看请求URL发现实际请求的是http://localhost:8080/api1/dashboard/workplace

在搜索大量资料后,找到对应解决方案如下,在hello-arco-pro目录下会存在一个环境变量文件.env.development,里面的内容配置了Vite调用API时的基础URL

1
VITE_API_BASE_URL= 'http://localhost:8080'

这与刚才看到的实际请求URL是相符的,将文件中的此行配置删除,即可解决问题,实现跨域API的正常访问