vue3 解决跨域问题

 vite.config.ts配置

vite默认不加载.env文件，可以使用loadEnv来加载 

import { fileURLToPath, URL } from "node:url";

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  /**
   * process.cwd()：获取当前工作目录的路径
   * loadEnv():加载环境变量
   * mode：当前运行模式
   */
  const env = loadEnv(mode, process.cwd());
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },

    server: {
      // 跨域配置
      proxy: {
        [env.VITE_BASE_URL]: {
          target: env.VITE_SERVE_URL, // 目标服务器地址
          changeOrigin: true, // 是否改变请求头中的Origin字段，默认true
          rewrite: (path) => path.replace(RegExp(`^${env.VITE_BASE_URL}`), ""), // 重写
        },
      },
    },
  };
});

 .env.development配置

vite中的环境变量必须以VITE_开头才能被识别 

VITE_BASE_URL = '/api'

# 后端服务的地址
VITE_SERVE_URL = 'http://127.0.0.1:8080/admin'

request配置

import axios from "axios";

const servies = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
  timeout:30000
});

/** 请求拦截器 */
servies.interceptors.request.use(
  (config) => {
    console.log("请求数据", config);
    
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

/** 响应拦截器 */
servies.interceptors.response.use(
  (res) => {
    console.log("响应数据", res);
    return res;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

export default servies;