前后端分离的项目，前端vue的session为null的解决方法

前后端分离的项目，前端vue的session为null的解决方法

我在写一个管理系统用户登录的功能，在输入完用户名和密码之后，需要再输入验证码进行校验，输入正确则登录成功，进入系统首页。

我写的逻辑是把验证码存入到session中，从session拿到正确的验证码数值与输入的验证码做比较。

这个在接口文档上测是可以成功，但是放在vue中就session是null，拿不到。

日志是这样打印的：

所以问题应该是跨域，导致前端拿不到session

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

修改

后端改CorsConfig,是跨域请求的一个配置文件

加了一句 .allowedOrigins("http://localhost")

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    

    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 再次加入前端Origin  localhost！=127.0.0.1
                .allowedOrigins("http://localhost")
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

前端修改axios配置，我是自己封装的，所以改了这里

加了一句withCredentials: true

const request = axios.create({
  baseURL: 'http://localhost:8888',
  withCredentials: true
})

成功！