多服务器(多后端)跨域代理

第一层封装 不再 写 baseUrl utils/request.ts

import axios from 'axios'
import { ElMessage } from 'element-plus'

const instance = axios.create({
})

//拦截器配置
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么   ---token 
    // 拼接token: 如果有本地token[用户已经登录了] 所有的都加上token 再去请求
    if(localStorage.getItem('user')){
        // 如果程序员确定这个有数据 请给变量 !:我是开发者我确定有数据,没有数据,我自己负责
        let {token} = JSON.parse(localStorage.getItem('user')!)
        config.headers.Authorization = 'Bearer ' + token
    }

    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么  --去层级---5分钟无感token
    //如果code ==0 给成功提示即可---提示组件  elment plus
    // 如果 有msg 给提示,没有就不管
    let {code,msg} = response.data; 
    if(code ==0){
        // 如果有msg 再运行后面   1 || data--
        msg && ElMessage.success(msg);
    }else{
        msg && ElMessage.error(msg);    
    }
    return response.data; //{data:'后端返回的数据}
    
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });


export default instance;

每个第二层的封装 都设置 baseUrl

import axios from '../utils/request'

// 设置baseUrl
axios.defaults.baseURL = '/xxx'

// 登录接口
export const teacherList = ():Promise<any>=>{
    return axios.get('/teacher/list',)
}

引用层

import axios from '../utils/request'
// 设置baseUrl
axios.defaults.baseURL = '/old'

// 登录接口
export const userLogin = (data:UserLoginReq):Promise<UserLoginRes>=>{
    return axios.post('/users/checkLogin',data)
}

修改vite.config.ts 配置 做多服务器本地代理配置

1.支持多服务器请求

2.所有服务器 均可以支持跨域请求[ 上线之后 需要运维 做 反向代理]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path'   // https://vitejs.dev/config/ export default defineConfig({   plugins: [vue(),   ],   resolve: {     alias: {       "@": resolve(__dirname, './src')     }   },   // 本地开发服务器配置   server:{     proxy:{       "/old":{         // 目标服务器         target:'http://------地址1---------,         // 是否支持跨域         changeOrigin:true,         // 是否支持websocket         ws:true,         // 去掉地址前缀         rewrite:path=>path.replace('/old','')         },       '/xxx':{         target:'https://www.-------地址二-----------           // 是否支持跨域           changeOrigin:true,           // 是否支持websocket           ws:true,           // 去掉地址前缀           rewrite:path=>path.replace('/xxx','')       }     }   } })