vue中跨域以及sessionId不一致問題及解決
情景
使用Vue和SpringBoot做前后端分離項目,出現(xiàn)跨域問題,因為前端訪問調(diào)用后端3個接口
- 第一:session校驗
- 第二:登錄
- 第三:查詢接口
但是將session分別獲取,然后打印出來,發(fā)現(xiàn)sessionid不一致,導致訪問第三個查詢數(shù)據(jù)接口而失敗。
后端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; }
關(guān)鍵是這兩句
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域請求 response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域
注意:
當Access-Control-Allow-Credentials設(shè)置為ture時,Access-Control-Allow-Origin不能設(shè)置為*
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 //本地調(diào)試將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======="); //校驗權(quán)限 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請求數(shù)據(jù)
axios默認是發(fā)送請求的時候不會帶上cookie的,需要通過設(shè)置withCredentials: true來解決
axios.defaults.withCredentials = true
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vite項目import.meta.env如何能獲取非VITE開發(fā)的環(huán)境變量
這篇文章主要介紹了vite項目import.meta.env如何能獲取非VITE開發(fā)的環(huán)境變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05