2021-09-06

vue跨域请求session问题

今天写项目，这个问题困扰我整整一天，很逆天，拖了很多进度。在此记录一下。
我的项目是用vue+springboot框架写的，涉及到了跨域请求问题。因为是axios，所以我从登录页跳转到首页的时候，session中的id会变化，所以后端session的set、get不是同一个session。因此就会一直报错，get的session一直为空，这就和跨域请求有关系了。

解决办法：
后台使用SpringBoot，需要配置过滤器来处理跨域请求。
新建个类，写入如下代码：

import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.*;


// 跨域请求 保证session一致

@Component
public class FilterConfig implements HandlerInterceptor{

    public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
            throws Exception {
    }

    public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2)
            throws Exception {
    }

    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception {

        response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));   //支持跨域请求
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");   //是否支持cookie跨域
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");//Origin, X-Requested-With, Content-Type, Accept,Access-Token
        return true;
    }
}

前端使用 axios请求数据，axios默认是发送请求的时候不会带上cookie的，需要通过设置withCredentials: true来解决 。在vue中加入如下代码：

import axios from 'axios'   //导入axios跨域请求
axios.defaults.withCredentials = true;// 允许跨域携带cookie
Vue.prototype.$http = axios  //挂载axois

完美解决！
此处一定要记住前后端分离有跨域请求的时候，要知道页面跳转之后session的id值就不一样了！！！！