Vue 3 与spring boot连接

今天实现了简单的Vue 3 与spring boot后台连接;
我们需要在Vue 3项目的src目录下创建一个utils包，完成拦截器的配置
request.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 => {
    if (!config) {
        config = {}; // 如果 config 为 undefined，初始化一个空对象
    }
    if (!config.headers) {
        config.headers = {}; // 如果 headers 为 undefined，初始化一个空对象
    }
    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(typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        if(error.response.status === 404){
            ElMessage.error('未找到请求接口')
        } else if (error.response.status === 500){
            ElMessage.error('系统异常，请查看后端控制台报错')
        } else {
            console.error(error.message)
        }
        return Promise.reject(error)
    }
)

export default request

在Vue文件中实现最简单的数据库连接：

request.get('/user/selectAll').then(res => {
  console.log(res)
  data.userList = res.data
  console.log(data.userList)
})

我们把数据显示在控制台。
重启项目，会发现遇到了跨域错误。
回到springboot目录下，创建CorsConfig类：

package com.vivy.common;

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("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}

再次重启项目，就可以在控制台找到数据库中的数据了。