Vue+Arco Design Pro配置proxy跨域代理

最近在使用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目录结构如下：

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则手动添加）：

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