springboot-vue前后端分离项目跨域session不一致的问题

1.待解决的问题

待解决问题:
1.springboot+vue前后端分离项目的跨域问题
2.springboot+vue前后端分离项目跨域每次访问后端接口sessionid不一致的问题

2.问题分析

问题分析:
前后台分离项目session不能获取到的原因是因为跨域导致请求无法携带和服务器对应的cookie,不是因为前后台分离!前后台分离项目涉及跨域,所以导致每次请求的sessionid不一致

那各位就会有疑问了,为什么浏览器会产生跨域问题呢?那就牵扯到浏览器的同源保护机制了
同源策略是浏览器保证安全的基础,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页同源。
所谓同源是指:
1.协议相同
2.域名相同
3.端口相同

3.问题的解决

1.1、如果前后端项目不进行任何配置,前端直接访问后端,会在浏览器中报“NETWORK”错误,也就是跨域错误,具体报错如下
在这里插入图片描述

1.2、后端再被访问的控制层上添加跨域注解@CrossOrigin,即可解决问题一
在这里插入图片描述

2.1、解决完问题一后启动项目,进行访问,你会发现尽管你在登录成功后将用户的信息存入到了session中,你在后面还是会取不到session中的值
在这里插入图片描述细心的人会发现上面两次请求的session对象不一样

2.2、于是我发送了多次请求,但是每次请求中传递的session都不一样,如下:
在这里插入图片描述2.3百度后得知是因为每次请求都不会默认携带cookie,而传统的请求中会使用cookie + session的机制进行session的校验,因此我们只需要在前后端进行请求携带cookie的配置即可

前端配置:在封装的axios(即request.js)中,进行如下配置
在这里插入图片描述前端进行了请求cookie的携带,那么后端也需要进行相关的cookie接收

后端配置:
创建过滤器:
在这里插入图片描述

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
log.info("########进入到了过滤器中{}",filterChain);
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
response.setHeader(“Access-Control-Allow-Origin”, request.getHeader(“Origin”));
response.setHeader(“Access-Control-Allow-Methods”, “POST, GET, OPTIONS, DELETE”);
response.setHeader(“Access-Control-Max-Age”, “3600”);
response.setHeader(“Access-Control-Allow-Headers”, “Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token”);
response.setHeader(“Access-Control-Allow-Credentials”,“true”); //是否支持cookie跨域
filterChain.doFilter(servletRequest, servletResponse);
}

创建过滤器的配置类在这里插入图片描述

@Configuration
public class LoginFilterConfiguration {
@Bean
public RegistrationBean myFilter(){
LoginFilter loginFilter = new LoginFilter();
FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean(loginFilter);
filterRegistrationBean.setUrlPatterns(Arrays.asList("/*"));
return filterRegistrationBean;
}
}

完成以上配置后,就会解决问题一和问题二了,有什么问题,在评论区说吧,看到会回复的

评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值