Springboot+vue跨域+登录拦截问题,前端获取不到session,每次请求sessionid变化

折磨了整整两天,终于把这个问题搞定了.

一开始后端开发完后,用apifox所有接口测试都是可以的,但当前端跑起来后发现接收不到后端的数据.

网上查了很多方法,首先试了查到的前端代理方法

没用,代理配置了但api不会替换成设置好的代理,还是以字符串形式到相对路径上.

于是找了后端的办法,

@CrossOrigin(origin = "*")

配置了cros后,前端能成功接受到数据,本以为皆大欢喜了,但是后端做了登录拦截后,发现所有拦截的页面都报跨域错误,而取消拦截后正常.

为了解决这个问题,狠狠的恶补了浏览器相关方面的知识,发现虽然访问了页面,获得了数据,但访问前端的网址,浏览器里并没有cookie记录以及session记录,得出结果,问题在于登录上.

在后端进行了测试,发现能成功登录,并将数据保存到session里.

又直接用浏览器访问后端网址,发现浏览器能获得cookie,得出结论问题出在前端,前端请求后端但却没获得cookie保存sessionid.

后来又尝试这样设置,发现没有效果

@CrossOrigin(originPatterns = "http://localhost:5173/",allowCredentials = "true",allowedHeaders = "true")

于是在后端做了修改,把后端得到的sessionid作为返回值返回给前端,让前端请求时带上cookie的请求头,测试后发现不行,浏览器已经禁止前端使用header.

在f12的network中仔细排查后发现,默认的主页虽然获取到了信息,但是没cookie记录,而每点一次登录,登录的请求头中的cookie存的sessionid都不一样.

查询相关知识后知道,浏览器第一次访问时会获得sessionid存在cookie中,后续访问如果有sessionid存着,会直接用.

于是问题就很清楚了,原因还是在于浏览器不能把返回的sessionid存在cookie中.

然后又经过多次研究,最终还是解决了这个问题,下面把方案放上来,

首先是前端,在vue的main.js中加上这个

axios.defaults.withCredentials = true;

然后是后端,这个配置类一方面用来实现cors跨域,注意,setallowedorigin这个绝对不能写"*",不然会报错

另一方面是corsfilter,这个会先于拦截器执行,解决跨域问题

package com.zjgsu.crazyshopping.controller.conf;


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 {
    private CorsConfiguration corsConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); //允许所有域名访问
        corsConfiguration.addAllowedMethod("*"); //允许所有请求头
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("http://localhost:5173/"); //允许所有的请求类型
        corsConfiguration.setMaxAge(3600L);
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter(){
        //存储request与跨域配置信息的容器，基于url的映射
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfig());
        return new CorsFilter(source);
    }

}