vue中跨域以及sessionId不一致問題及解決
情景
使用Vue和SpringBoot做前后端分離項(xiàng)目,出現(xiàn)跨域問題,因?yàn)榍岸嗽L問調(diào)用后端3個(gè)接口
- 第一:session校驗(yàn)
- 第二:登錄
- 第三:查詢接口
但是將session分別獲取,然后打印出來,發(fā)現(xiàn)sessionid不一致,導(dǎo)致訪問第三個(gè)查詢數(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跨域注意:
當(dāng)Access-Control-Allow-Credentials設(shè)置為ture時(shí),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;
/**
* 進(jìn)入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=======");
//校驗(yàn)權(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){
//默認(rèn)用戶
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默認(rèn)是發(fā)送請求的時(shí)候不會帶上cookie的,需要通過設(shè)置withCredentials: true來解決
axios.defaults.withCredentials = true

總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號)沖突問題
這篇文章主要介紹了解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號)沖突問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue+Echart實(shí)現(xiàn)利用率表盤效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echart實(shí)現(xiàn)利用率表盤的效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-04-04
Vue3之元素和組件的動畫切換實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Vue3之元素和組件的動畫切換實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element開發(fā)時(shí)遇到了不少問題,下面這篇文章主要給大家介紹了關(guān)于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級結(jié)構(gòu)與用法的相關(guān)資料,需要的朋友可以參考下2022-12-12
探索Vue中組合式API和選項(xiàng)式API的用法與比較
Vue3為我們開發(fā)提供了兩種組件邏輯實(shí)現(xiàn)方式:選項(xiàng)式API和組合式API,本文將嘗試為大家分析什么是選項(xiàng)式API和組合式API,以及兩種API的優(yōu)缺點(diǎn),希望對大家有所幫助2023-12-12

