Vue+elementui +Springboot session丢失解决方案

Posted 2021-11-08 xietao2282

前后端分离项目   由于端口不一致会出现跨域问题   解决跨域以后又会出现前后端sessionID不一致

首先跨域问题    跨域可以在前端配置代理 

proxyTable: {
 ‘/‘: {    //可配置

target: ‘http://192.168.0.162:8085 ‘, //后台IP以及端口
 changeOrigin: true,
 pathRewrite: {
 ‘^/‘: ‘‘
　　　　 }
　　 },
 },

具体网上很多配置  我主要解决session丢失问题上找了很久才找到真正能解决的方案

后台写过滤器

 

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyFilter implements Filter{

   @Override
   public void init(FilterConfig filterConfig) throws ServletException {
      // TODO Auto-generated method stub
   }
   @Override
   public void doFilter(ServletRequest servletRequest, ServletResponse res, FilterChain chain)
         throws IOException, ServletException {
       HttpServletResponse response = (HttpServletResponse) res;
      HttpServletRequest request=(HttpServletRequest)servletRequest;
      response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
      response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
      response.setHeader("Access-Control-Max-Age", "0");
      response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token,Access-Control-Allow-Headers");
      response.setHeader("Access-Control-Allow-Credentials", "true");  //关键设置
      response.setHeader("XDomainRequestAllowed","1");
         chain.doFilter(request, response);
   }
   @Override
   public void destroy() {
      // TODO Auto-generated method stub
   }
}  
前端允许携带cookie 就可以了
在main.js中添加axios.defaults.withCredentials = true