vue整合springboot

最新推荐文章于 2025-09-10 09:13:26 发布

原创最新推荐文章于 2025-09-10 09:13:26 发布 · 522 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #vue.js #java

本文介绍了如何在SpringBoot项目中配置跨域处理，包括使用CorsFilter解决跨域问题，以及如何全局注册axios并设置响应拦截器和请求拦截器。还提及了POST接收数据时可能遇到的问题和解决方案。

创建springboot项目

配置springboot文件

配置跨域

出现下面错误表示跨域出现问题添加注解可以解决

添加注解可以解决

跨域只能跨一次

配置跨域文件

@Configuration
public class CrossConfig {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
//        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedHeader("*");//允许所有的头
        corsConfiguration.addAllowedOrigin("*");//允许所有的请求
        corsConfiguration.addAllowedMethod("*");//允许所有的方法
        source.registerCorsConfiguration("/**", corsConfiguration);//所有的路径
        return new CorsFilter(source);
    }
}

注册全局axios

import axios from 'axios'
// 后端项目的时候  http://localhost:8899
// axios设置一个默认的路径
// 创建实例时配置默认值
const instance = axios.create({
// 访问路径的时候假的一个基础的路径
   baseURL: 'http://localhost:8899/'
});
// 起一个名字注册到vue 里面
// Vue. prototype.名字 = axios
 
Vue.prototype.$axios = instance;

修改响应

测试访问页面

拦截器

响应拦截器

配置响应文件

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result<T> {
    private Integer code = 200;
    private String msg = "操作成功";
    private  T t;
    public static <T> Result success(T t){
        return new Result<>(200,"操作成功",t);
    }
    public static <T> Result fail(){
        return new Result<>(500,"操作失败",null);
    }
    public static <T> Result forbidden(){
        return new Result<>(403,"权限不允许",null);
    }
}

修改服务端

修改main.js

instance.interceptors.response.use( response=> {
// 状态码  500
if(response.data.code==500){
       // 跳转到 login 组件里面
myrouter.push({path:"/login"});
 
return;
}
// 数据 直接返回给axios
     return response.data.t;
   }, error=> {
     // 超出 2xx 范围的状态码都会触发该函数。
     // 对响应错误做点什么
     return Promise.reject(error);
   });

请求拦截器

修改main.js

 // 请求拦截器
instance.interceptors.request.use( config=> {
  // config 前端  访问后端的时候  参数
 
  config.headers['Authorization']="yyl"
     return config;
   }, error=> {
     // 超出 2xx 范围的状态码都会触发该函数。
     // 对响应错误做点什么
     return Promise.reject(error);
   });