这是一个困扰了我很久的问题，这次解决这个问题我花了4天时间，因为基础不好，网上搜索的东西，千篇一律，甚至有一定的误导，这里面包含了vite版本不同，所以方法也不同，我用的是5，以下笔记为我个人理解，不一定对，但是适合我

封装http.js

封装的目的我认为是为了在axion上可以加请求报文，为前后端验证做准备

 import axios from 'axios'
// 创建axios实例
const service = axios.create({
  // API的base_url
   baseURL:import.meta.env.VITE_BASE_API,
   timeout:5000
})
// 请求拦截器
service.interceptors.request.use(
  config => {
     // 为请求添加跨域请求的头部
    // 这里可以添加请求头，比如添加一个Authorization的token
    if (localStorage.getItem('cb_token')) { 
      // 判断是否存在 token, 如果存在的话, 则每个 http header 都加上 token
         config.headers.Authorization = `${localStorage.getItem('cb_token')}`
     }
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)

  }
)
export default service

使用封装的这个 service

1，引入这个service

import service from '../http';
service.get('/houtai/login',{
 params: {
    username:fm.value.username,
    password:fm.value.password,
    tgzjj:'tgzjj' //通过中间件
    }
 })
.then(res =>{
    console.log(res.data);
                     if( res.data.code==='ok' ){
           // 保存访问令牌到本地存储
                        localStorage.setItem("user_id",res.data.id); //将用户名存入缓存
                        localStorage.setItem('cb_token', res.data.token_);
                        // localStorage.removeItem('username');   
                        // localStorage.clear();//删除所有值
a.value = false
                         router.push({name:'home'})
                       }else{
                        a.value = false
b.value = true
message.error('用户名或密码不正确');

      }
})
.catch(error =>{
console.log(error)
})

在vite.config.js配置代理

在vite.config.js中

server: {
    //用来配置跨域
    host: '0.0.0.0',
    port: 80,
    proxy: {
      '/houtai': {
        target: 'http://check.api.yaanidc.com',//目标服务器地址,最终会转换成本地localhost的
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  },

注意误区：

1：目标服务器地址,最终会转换成本地localhost的这就是我之前以为会是目标地址，所以一直觉得不对

2：houtai 这个的是一个路径，必须在发起请求那个地方加上，不然转换不了