安装axios实现前后端数据交互

npm i axios -S

 编写拦截请求js文件

import axios from "axios";
import {ElMessage} from "element-plus";

const request = axios.create({
    baseURL:'http://localhost:9090',//访问后台接口
    timeout: 30000 //后台接口超时时间
})

//request拦截器
//可以自请求发送前对请求做一些处理
request.interceptors.request.use(config =>{
    config.headers['Content-Type']='application/json;charset=utf-8';
    return config
},error =>{
    return Promise.reject(error)
});

//response拦截器
//可以在接口响应后统一处理结果
request.interceptors.response.use(
    response =>{
        let res = response.data;
        //如果是返回的文件
        if (response.config.responseType === 'blob'){
            return res
        }
        //兼容服务端返回字符串数据
        if (typeof res === 'string'){
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error=>{
        if (error.response.status === 40){
            ElMessage.error('未找到请求接口')
        }else if (error.response.status === 500){
            ElMessage.error('系统异常，请查看后端控制台报错')
        }else{
            console.error(error.message)
        }
        return Promise.reject(error)/*有啥错误打印一下*/
    }
)

export  default request

测试请求

<script setup>
//写一个请求，测试
import request from "@/utils/request.js";

request.get('/test/hello').then(res => {
  console.log(res)
})
</script>

 

前端访问后台跨域连接问题 

 需要一个配置类

package com.boss.common.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 跨域配置
 */
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

重启后正常显示 

定义配置文件 .env文件

 

request.js

const request = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL,//访问后台接口
    timeout: 30000 //后台接口超时时间
})

问题：修改环境变量后无法正确识别路径地址

解决：重启dev，使配置的环境变量生效 

设置vite懒加载 

  // 预加载项目必需的组件

  optimizeDeps: {
    include: [
      "vue",
      "vue-router",
      "axios",
      "element-plus/es/components/base/style/css",
      "element-plus/es/components/message/style/css",
      "element-plus/es/components/message-box/style/css",
      "element-plus/es/components/form/style/css",
      "element-plus/es/components/form-item/style/css",
      "element-plus/es/components/button/style/css",
      "element-plus/es/components/input/style/css",
      "element-plus/es/components/input-number/style/css",
      "element-plus/es/components/switch/style/css",
      "element-plus/es/components/upload/style/css",
      "element-plus/es/components/menu/style/css",
      "element-plus/es/components/col/style/css",
      "element-plus/es/components/icon/style/css",
      "element-plus/es/components/row/style/css",
      "element-plus/es/components/tag/style/css",
      "element-plus/es/components/dialog/style/css",
      "element-plus/es/components/radio-group/style/css",
      "element-plus/es/components/popover/style/css",
      "element-plus/es/components/scrollbar/style/css",
      "element-plus/es/components/tooltip/style/css",
      "element-plus/es/components/dropdown/style/css",
      "element-plus/es/components/dropdown-menu/style/css",
      "element-plus/es/components/dropdown-item/style/css",
      "element-plus/es/components/sub-menu/style/css",
      "element-plus/es/components/menu-item/style/css",
      "element-plus/es/components/divider/style/css",
      "element-plus/es/components/card/style/css",
      "element-plus/es/components/link/style/css",
      "element-plus/es/components/breadcrumb/style/css",
      "element-plus/es/components/breadcrumb-item/style/css",
      "element-plus/es/components/table/style/css",
      "element-plus/es/components/tree-select/style/css",
      "element-plus/es/components/table-column/style/css",
      "element-plus/es/components/select/style/css",
      "element-plus/es/components/option/style/css",
      "element-plus/es/components/pagination/style/css",
      "element-plus/es/components/tree/style/css",
      "element-plus/es/components/alert/style/css",
      "element-plus/es/components/radio-button/style/css",
      "element-plus/es/components/checkbox-group/style/css",
      "element-plus/es/components/checkbox/style/css",
      "element-plus/es/components/tabs/style/css",
      "element-plus/es/components/tab-pane/style/css",
      "element-plus/es/components/rate/style/css",
      "element-plus/es/components/date-picker/style/css",
      "element-plus/es/components/notification/style/css",
      "element-plus/es/components/image/style/css",
      "element-plus/es/components/statistic/style/css",
      "element-plus/es/components/watermark/style/css",
      "element-plus/es/components/config-provider/style/css",
      "element-plus/es/components/text/style/css",
      "element-plus/es/components/drawer/style/css",
      "element-plus/es/components/color-picker/style/css"
    ],
  },