vue3中实现跨域

一、.env.production生产环境内容

VITE_BASE_URL=''
VITE_TITLE=正式环境

二、.env.development开发环境内容

VUE_APP_TITLE=测试环境
VITE_BASE_URL=/dev-api

三、vite.config.js中的配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server:{
    proxy:{
      '/dev-api':{
        target:'http://ggq.njh.com',
        changeOrigin:true,
        rewrite:path=>path.replace(/^\/dev-api/,'')
      }
    }
  }
})

四、utils中的request.js的内容

import axios from 'axios'

// import.meta.env 读取配置文件的内容
export const baseURL = import.meta.env.VITE_BASE_URL

console.log("VITE_BASE_URL:",import.meta.env.VITE_BASE_URL)

var instance = axios.create({
    baseURL: baseURL,
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // if(getToken()){
    //     config.headers.token = getToken()
    // }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

// // 添加请求拦截器
// instance.interceptors.request.use(function (config) {
//     // 在发送请求之前做些什么
//     if(getToken()){  //如果存在token 把token放到请求头里
//         config.headers.token = getToken()
//     }
//     return config;
// }, function (error) {
//     // 对请求错误做些什么
//     return Promise.reject(error);
// });

// // 添加响应拦截器
// instance.interceptors.response.use(function (response) {
//    // console.log("响应拦截器",response)
//     // 对响应数据做点什么
//     return response.data;//后端给的数据
//     }, function (error) {
//     // 对响应错误做点什么
//     return Promise.reject(error);
//     });

export default instance

五、打印结果