vite与axios如何配置多个接口域名支持跨域,若依配置为例

介绍

        我们做的项目接口有的是从多个地方获取。比如一下子去 baidu.com/api 拿数据，一下子去qq.com/api去拿数据。 传统的vite配置都是配置一个接口地址。如何配置多个呢？这里已若依的配置为例

步骤

.env文件配置

.env.development文件开发环境代码如下：

VITE_HOST_BAIDU_URL = 'baidu-api'
VITE_HOST_QQ_URL = 'qq-api'

.env.production 文件 生产环境代码如下：

VITE_HOST_BAIDU_URL = 'https://www.baidu.com/prod-api'
VITE_HOST_QQ_URL = 'https://www.qq.com/prod-api'

配置文件中开发环境用的是相对地址，而生产环境用的是绝对地址。这里的绝对地址可以是你部署的服务器域名，或者是支持跨域的代理域名等。你比如说你的前端静态文件正好放在baidu.com服务器上，则也可以改为相对地址与绝对地址，并且他们是同一个域也不存在跨域问题。开发环境则可通过后缀用node走代理将数据拿过来，而不是去走浏览器。

vite.config.js配置

 server: {port: 8083,open: true,host:true,proxy: {