springboot+vue前后端分离session跨域每次id不同

今天基于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是不一样的。

如果本篇文章对您有帮助，希望大家动动小手，点个赞。

springboot+vue前后端分离session跨域每次id不同

Guess you like