Springboot+vue 前后端分离出现后端session的获取为null

Springboot+vue 前后端分离出现后端校验验证码时出现获取session中的值为null的情况。

最近在写前后端分离的项目时,使用到后端验证码的情况。一般是在前端先get请求获取后端图片,并且将生成的验证存储到session中,然后前端再post请求登陆时,将form表单中的验证码传递到后端,然后后端再取出session中的验证码进行比较验证,但是由于跨域问题,在最后一步验证时出现取出的session值为null。在看了几篇博文后得出以下结论:
参考博文
https://blog.csdn.net/simg_dragon/article/details/108338427
https://blog.csdn.net/qq_43751336/article/details/111145876
首先是后端部分:

package com.example.demo.common;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrossConfig implements WebMvcConfigurer {
    @Override
    /*请求跨域*/
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 再次加入前端Origin  localhost!=127.0.0.1
                .allowedOrigins("http://localhost")
                // 是否允许证书(cookies)
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                //允许请求头
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

主要是2个地方
1:allowCredentials(true)设置带cookie
2:allowedOrigins这里就不能写成allowedOrigins("*")要改成前端Origin记住localhost!=127.0.0.1
然后就是前端部分:

在main.js中配置axios这行代码

axios.defaults.withCredentials = true;

这样就将session由于跨域而失效的问题解决啦!

  • 2
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值