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

第一层封装 不再 写 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.所有服务器 均可以支持跨域请求[ 上线之后 需要运维 做 反向代理]

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','')
      }
    }
  }
})