vue中跨域以及sessionId不一致问题及解决

 更新时间:2023年12月06日 15:49:09   作者:花和尚也有春天  
这篇文章主要介绍了vue中跨域以及sessionId不一致问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

情景

使用Vue和SpringBoot做前后端分离项目,出现跨域问题,因为前端访问调用后端3个接口

  • 第一:session校验 
  • 第二:登录 
  • 第三:查询接口

但是将session分别获取,然后打印出来,发现sessionid不一致,导致访问第三个查询数据接口而失败。

后端springboot处理

拦截器preHandle中加入如下 代码:

 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");
        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;
    }

关键是这两句 

response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域请求

response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域

注意:

当Access-Control-Allow-Credentials设置为ture时,Access-Control-Allow-Origin不能设置为*

package com.huayong.bi.web.interceptor;
 
import com.huayong.bi.inter.constants.EnumHttpStatusType;
import com.huayong.bi.inter.util.LogUtil;
import com.huayong.bi.web.common.util.SpringUtil;
import com.huayong.bi.web.dao.impl.PermissionCheckImpl;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.Set;
 
public class LoginInterceptor implements HandlerInterceptor {
 
    private static final Logger log = LoggerFactory.getLogger(LoginInterceptor.class);
 
    PermissionCheckImpl pci = null;
 
 
    /**
     * 进入controller层之前拦截请求
     * @param request
     * @param
     * @param
     * @return
     * @throws Exception
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        PrintWriter out = null;
        JSONObject jo = null;
        try {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");
//        response.setHeader("Access-Control-Allow-Origin", "*");
//        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//        response.setHeader("Access-Control-Max-Age", "3600");
//        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
 
 
            response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
            response.setHeader("Access-Control-Allow-Methods", "*");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            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
            
 
        //本地调试将if-else注释 直接返回true
        if ("".equals((String) request.getSession().getAttribute("token")) || (String) request.getSession().getAttribute("token") == null) {
            PrintWriter writer = response.getWriter();
            writer.print("login");
            return false;
        } else {
            System.out.println("=====LoginInterceptor=======");
            //校验权限
            String userName = (String) request.getSession().getAttribute("userName");
            String mobile = (String) request.getSession().getAttribute("mobile");
            LogUtil.print("---userName---" + userName);
            LogUtil.print("---mobile---" + mobile);
            LogUtil.print("URL : " + request.getRequestURL().toString());
            System.out.println("URL : " + request.getRequestURL().toString());
            System.out.println("RequestURI : " + request.getRequestURI());
            pci = (PermissionCheckImpl) SpringUtil.getBean("permissionCheckImpl");
            String uri = request.getRequestURI();
            Set<String> set = pci.queryPermissions(userName, mobile);
            if(null==set || set.size()<1){
                //默认用户
                userName="普通用户";
                mobile="0";
                set = pci.queryPermissions(userName, mobile);
            }
            boolean per = false;
                if (null != set && set.size() > 0) {
                    for (String se : set) {
                        LogUtil.print("---se---" + se);
                        if (uri.split("/")[1].equals(se.replace("/", ""))) {
                            if (per == false) {
                                per = true;
                            }
                        }
                    }
                }else{
                    jo = new JSONObject();
                    jo.put("code", EnumHttpStatusType.no_permission.getCode());
                    jo.put("msg", EnumHttpStatusType.no_permission.getStatus());
                    jo.put("data", "");
                    out = response.getWriter();
                    out.append(jo.toString());
                    return false;
                }
                if (per == true) {
                    return true;
                } else {
                        jo = new JSONObject();
                        jo.put("code", EnumHttpStatusType.no_permission.getCode());
                        jo.put("msg", EnumHttpStatusType.no_permission.getStatus());
                        jo.put("data", "");
                        out = response.getWriter();
                        out.append(jo.toString());
                        return false;
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            response.sendError(500);
            return false;
        }
    }
 
    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
        //log.info("--------------处理请求完成后视图渲染之前的处理操作---------------");
    }
 
    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
        //log.info("---------------视图渲染之后的操作-------------------------0");
    }
 
}

前端vue处理

前端使用 axios请求数据

axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决 

axios.defaults.withCredentials = true

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题

    解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题

    这篇文章主要介绍了解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 利用Vue实现简易播放器的完整代码

    利用Vue实现简易播放器的完整代码

    这篇文章主要给大家介绍了关于如何利用Vue实现简易播放器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 登录模块与token的使用和创建方式

    登录模块与token的使用和创建方式

    本文讲述了如何在Vue中实现登录、获取用户信息、退出登录以及Token的使用方法,文章详细介绍了登录流程、获取用户信息、退出登录以及Token的作用和使用方法
    2026-05-05
  • Vue+Echart实现利用率表盘效果的示例代码

    Vue+Echart实现利用率表盘效果的示例代码

    这篇文章主要为大家详细介绍了Vue如何利用Echart实现利用率表盘的效果,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下
    2023-04-04
  • Vue3之元素和组件的动画切换实现示例详解

    Vue3之元素和组件的动画切换实现示例详解

    这篇文章主要为大家介绍了Vue3之元素和组件的动画切换实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法示例

    Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)

    最近在使用Element开发时遇到了不少问题,下面这篇文章主要给大家介绍了关于Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue3 头像上传 组件功能实现

    vue3 头像上传 组件功能实现

    这篇文章主要介绍了vue3头像上传组件功能,用到了自定义组件v-model的双向绑定,使用axios + formData 上传文件,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue使用gitshot生成gif问题

    vue使用gitshot生成gif问题

    这篇文章主要介绍了vue使用gitshot生成gif问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 探索Vue中组合式API和选项式API的用法与比较

    探索Vue中组合式API和选项式API的用法与比较

    Vue3为我们开发提供了两种组件逻辑实现方式:选项式API和组合式API,本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点,希望对大家有所帮助
    2023-12-12
  • VUE实现可随意拖动的弹窗组件

    VUE实现可随意拖动的弹窗组件

    今天小编就为大家分享一篇VUE实现可随意拖动的弹窗组件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论