vue-admin-template 多个跨域模式设置

通常在跨域时会涉及到从某个固定的服务器获取数据，比如计划信息从计划接口服务器获取（主要的跨域地址），但是天气信息从固定的气象接口服务器获取，图片信息从图片接口服务器获取，此时不能用原来的默认模式

一、简单的方法（只讲开发模式下）

1、直接在proxyTable中配置

1）配置开发环境下默认计划服务器地址跨域

2）配置开发环境下天气信息跨域

简单模式时完整配置，如天气信息getWeather的实际完整地址

3）修改开发环境的默认根目录地址为主要的跨域配置地址

在根目录下找到.env.production文件，修改VUE_APP_BASE_API为1.1中设置的计划的跨域地址/apis

可以看到这个VUE_APP_BASE_API是在src/utils/request.js文件中被引用

修改后，重新编译，运行，可以看到对应的模拟登陆接口请求头也变成了apis

2、配置计划相关接口

在src/api目录下新建myplan.js 文件，在文件中配置有关计划的接口，配置时要先引入request.js 通用配置

3、计划接口具体调用实现

先引入 接口文件

import { getAll } from '@/api/myPlan'

接口调用 

getAll(params).then

4、气象接口配置

1）在src/utils下新建requestProxy.js

requestProxy.js和request.js 基本相同，只是修改baseURL为''

2）在src/api下新建mapProxy.js 文件，在其中配置具体的接口及其实现

a、注意这里的接口中的url是基于第一步中的气象跨域配置来实现的，如下图若气象跨域配置为完整的气象接口，则在mapProxy.js中的url只需要填写/getWeather

b、如果气象跨域配置到weatherforecastinfo，则在mapProxy.js中的url需要填写/getWeather/getweatherinfobycityid.do

c、进一步的，还可以将气象接口的整个根目录名称 如  mchart 也配置成配置，这样跨域配置为

对应的接口配置如下，先引入气象接口项目名称，再配置接口

3)气象具体的调用方式同计划的调用方式一样

 

总结，就是配置两种axios 的调用方式，默认的请求引入的是request文件，其中axios默认的baseURL要配置成主要的跨域地址，对于其它级别的跨域请求，引入的是requestProxy.js文件，baseURL设置为‘’

本文地址：https://blog.csdn.net/chpswg/article/details/108845081