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实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了使用Webpack 搭建 Vue3 开发环境过程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue的webcamjs集成方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue设置长时间未操作登录以后自动到期返回登录页,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2020-01-01
这篇文章主要介绍了vue中组件参数,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
本文通过实例代码给大家介绍了vue仿百度搜索功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-02-02
小编给大家整理了关于vue移动端日期选择组件的知识点总结，希望能够给读者带来帮助，一起学习参考下。2018-02-02
这篇文章主要介绍了解决Vue 给mapState中定义的属性赋值报错的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
mixins是一种分发 Vue 组件中可复用功能的使用方式,它是一个 js 对象,包含我们组件script中的任意功能选项,下面就跟随小编一起来看看它的具体使用吧2024-03-03
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下2019-03-03
最新评论