最近在写一个前后端分离项目,在写到登录时添加验证码,遇到了一个问题:
在后端获取验证码的值存到session里,但在前端发请求进行验证码验证时取出来的session是空的。
debug后发现是因为前后端分离每次axios发请求都是新的session(因为session的跨同源策略),导致无法获取之前的session信息,博主一顿好找,终于发现要在跨域配置的配置类里允许添加认证信息,接下来贴上代码
后端:
@Configuration
class CORSConf {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("*")
.allowedMethods("*")
.allowedOrigins("xxxx") //前端origin
.allowCredentials(true);
}
};
}
}
在设置了allowCredentials(true)之后,allowedOrigins()就不能再设置为allowedOrigins("*")。
前端我用的是axios,所以只需要在自己封装request.js加上
const request = axios.create({
baseURL: process.env.VUE_APP_SERVER_TARGET,
timeout: 5000,
withCredentials: true
})
或者直接在main.js上添加
axios.defaults.withCredentials = true
这样就将session由于跨域而失效的问题解决啦!