vite项目中配置代理转发

场景

本地有个后台服务，http://localhost:5000/login 接口，后端没有允许跨域，如何在vite项目中请求该服务，vite项目在http://localhost:5173 运行着

配置

前端配置

//vite.config.js
export default defineConfig({
  resolve:{
    alias:{
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
  },
  plugins: [vue()],
  server: {
    // port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:5000', //目标请求的地址
        changeOrigin: true,
        rewrite: (path) => {
          console.log("🚀 ~ path:", path)
          return path.replace(/^\/api/, '') //是否替换掉地址栏的/api
        }
      }
    }
  }
})

以为这样就可以了，但是还是存在跨域

问题

问题就在这里，baseURL这里我设置了完整地址，会直接跳过vite服务器代理，不会经过vite开发服务器，所以vite的配置不会生效。所以这里应该配置一个相对地址，vite的开发服务器根据这个相对路径进行转发

//request.js

import axios from "axios";

const instance = axios.create({
    // baseURL:import.meta.env.VITE_API_BASE_URL,
    baseURL:"http://localhost:5000/api",
    timeout:5000
})

// 请求拦截器
instance.interceptors.request.use(config=>{
    // 全局注入token
    const token = localStorage.getItem("token");
    if(token){
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
},
    err =>{
        return Promise.reject(err)
    }
)

// 响应拦截器
instance.interceptors.response.use(
    response => {
        const {code, data} = response.data;
        console.log(response);
        
        if(code === 200){
            return data;
        }else{
            return Promise.reject(new Error(response.message || "Error"))
        }
    },
    err => {
        return Promise.reject(new Error(err || "Error"))
    }
)

export default instance;

解决

直接将这里改为相对地址

//request.js
const instance = axios.create({
    baseURL:"/api",
    timeout:5000
})

配置环境变量

添加vite的全局变量，然后通过import的方式根据环境不同进行不同的引入

vite方式导入

//request.js
const instance = axios.create({
    baseURL:import.meta.env.VITE_API_BASE_URL,
    timeout:5000
})

注意 生产的地址一般是完整地址，因为生产的会做nginx转发，所以这里配置完整地址也没问题