springboot+vue前后端分离session跨域每次id不同
今天基于springboot+vue写了一个基本的前后端分离项目,但是当我从后端传入session时,我在前端取出的值都是null,于是我开始排查bug,首先我在后端的方法中输出session,看看当前方法session是否已经存入了值,此时发现,当前方法有值,但是其他的方法时没有值的,然后我突然意识到,在vue项目中axios请求后端api的时候,每一次都是开启了一个新的会话,也就是说取到的se
今天基于springboot+vue写了一个基本的前后端分离项目,但是当我从后端传入session时,我在前端取出的值都是null,于是我开始排查bug,首先我在后端的方法中输出session,看看当前方法session是否已经存入了值,此时发现,当前方法有值,但是其他的方法时没有值的,然后我突然意识到,在vue项目中axios请求后端api的时候,每一次都是开启了一个新的会话,也就是说取到的session不是同一个。
于是我通过System.out.println(session.getId())分别输出了几个方法里面session的id,果然,每个sessionid都是不同的。
解决方法:
首先解决跨域问题,这个问题很好解决,可以在vue项目中,设置代理。当然我个人还是认为在后端解决比较快,我们可以在后端设置一个拦截器或者过滤器处理请求,允许前端跨域。diamante如下:
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 WebmvcConfig implements WebMvcConfigurer {
//解决前后端分离跨域问题
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")//设置允许跨域的路径
.allowedOrigins("http://127.0.0.1:8080")//设置允许跨域请求的域名
.allowCredentials(true)//是否允许证书 不再默认开启
.allowedMethods("GET", "POST", "PUT", "DELETE")//设置允许的方法
.maxAge(3600);//跨域允许时间
}
}
这里的origins最好设置为具体路径,设置为*可能也会有跨域问题,这样关于前后端跨域的问题就解决了,我们再来解决sessionid的问题,vue跨域访问的时候默认是不携带cookie的,axios.defaults.withCredentials是默认为false的,所以我们需要在main.js中设置其为true,让他在访问的时候允许携带cookie
axios.defaults.withCredentials = true
其实到这里,sessionid的问题就已经解决了,但是我还踩了个坑,我在设置请求路径的时候,所有的路径都是写的127.0.0.1,包括我在后端跨域配置的时候也写的是127.0.0.1,但是我在启动vue项目的时候,vscode中的路径是localhost:8080,我直接ctrl+click点击打开了,所以sessionid还是不一样,我改回127.0.0.1就好了,注意,localhost和127.0.0.1是不一样的。
如果本篇文章对您有帮助,希望大家动动小手,点个赞。
更多推荐
所有评论(0)