前后端分离实现WebSocket通信，两次session不一致的问题

前端使用Vue实现，使用axios发送请求

后端使用SSM实现

科普：可以一般使用两种方式来实现WebSocket通信时区分不同客户端

第一种：在登录成功后，将用户的唯一标识存在session，等下次再次请求时就可以从session中拿到唯一标识

第二种：在登录成功后，将用户的数据和唯一标识传给前端，前端保存在本地，等下次请求时，将用户的唯一标识发送给后端

我使用的是第一种方式

问题描述

我是这样实现的

在登陆成功后，将用户唯一标识放在session域中

下面是我写的Websocket握手拦截器代码

//WebSocket握手拦截器
@Component
public class MyHandShakeInterceptor extends HttpSessionHandshakeInterceptor {
    //握手前执行
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {
        if(request instanceof ServletServerHttpRequest){
            ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
            HttpSession session = servletRequest.getServletRequest().getSession();
            if(session != null){
                UserInfo userInfo = (UserInfo) session.getAttribute("USER_INFO");
                attributes.put("WEBSOCKET_ID", userInfo.getId());
                System.out.println("用户ID为"+userInfo.getId());
            }
        }
        return super.beforeHandshake(request, response, wsHandler, attributes);
    }

    //握手后执行
    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
        super.afterHandshake(request, response, wsHandler, ex);
    }
}

在握手前将session取出来，拿到放在session域中用户唯一ID

后端按照教程搭好了服务，并且设置了跨域，但是前端请求一直连不上，连接一直报500

 通过打印两次sessionId发现两次sessionId并不相同

解决方案

原来axios在发送请求时，默认是不携带cookie的，这样就导致，每次请求都是新的session

在main.js中更改配置

// 请求允许携带cookie
axios.defaults.withCredentials = true

再次测试