vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法
最近在做一個(gè)后臺(tái)管理系統(tǒng),前端是用時(shí)下火熱的vue.js,后臺(tái)是基于springboot的。因?yàn)楹笈_(tái)系統(tǒng)沒有登錄功能,但是公司要求統(tǒng)一登錄,登錄認(rèn)證統(tǒng)一使用.net項(xiàng)目組的認(rèn)證系統(tǒng)。那就意味著做單點(diǎn)登錄咯,至于不知道什么是單點(diǎn)登錄的同學(xué),建議去找一下萬能的度娘。
剛接到這個(gè)需求的時(shí)候,老夫心里便不屑的認(rèn)為:區(qū)區(qū)登錄何足掛齒,但是,開發(fā)的過程狠狠的打了我一巴掌(火辣辣的一巴掌)。。。,所以這次必須得好好記錄一下這次教訓(xùn),以免以后再踩這樣的坑。
我面臨的第一個(gè)問題是跨域,瀏覽器控制臺(tái)直接報(bào)CORS,以我多年開發(fā)經(jīng)驗(yàn),我果斷在后臺(tái)配置了跨域配置,代碼如下:
@Configuration public class CorsConfiguration { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedHeaders("*") .allowedMethods("*") .allowedOrigins("*"); } }; } }
這個(gè)配置就是允許所有mapping,所有請(qǐng)求頭,所有請(qǐng)求方法,所有源。改好配置之后我果斷重啟項(xiàng)目,看效果,結(jié)果發(fā)現(xiàn)根本沒法重定向跳轉(zhuǎn)到單點(diǎn)登錄頁面,看瀏覽器報(bào)錯(cuò)是跨域?qū)е碌?,我先上我登錄攔截器的代碼
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //用戶已經(jīng)登錄 if (request.getSession().getAttribute("user") != null) { return true; } //從單點(diǎn)登錄返回之后的狀態(tài),本系統(tǒng)還不處于登錄狀態(tài) //根據(jù)code值去獲取access_token,然后再根據(jù)access_token去獲取用戶信息,并將用戶信息存到session中 String state = request.getParameter("state"); String uri = getUri(request); if (isLoginFromSSO(state)) { String code = request.getParameter("code"); Object cacheUrl = request.getSession().getAttribute(state); if (cacheUrl == null) { response.sendRedirect(uri); return false; } HttpUtil client = new HttpUtil(); StringBuffer sb = new StringBuffer(); sb.append("code=").append(code) .append("&grant_type=").append("authorization_code") .append("&client_id=").append(SSOAuth.ClientID) .append("&client_secret=").append(SSOAuth.ClientSecret) .append("&redirect_uri=").append(URLEncoder.encode((String) cacheUrl)); String resp = client.post(SSOAuth.AccessTokenUrl, sb.toString()); Map<String, String> map = new Gson().fromJson(resp, Map.class); //根據(jù)access_token去獲取用戶信息 String accessToken = map.get("access_token"); HttpUtil http = new HttpUtil(); http.addHeader("Authorization", "Bearer " + accessToken); String encrypt = http.get(SSOAuth.UserUrl); String userinfo = decryptUserInfo(encrypt); //封裝成user對(duì)象 User user = new Gson().fromJson(userinfo, User.class); request.getSession().setAttribute("user", user); return true; } //跳轉(zhuǎn)到單點(diǎn)登錄界面 state = Const._SSO_LOGIN + Const.UNDERLINE + RandomUtil.getUUID(); request.getSession().setAttribute(state, uri); String redirectUrl = buildAuthCodeUrl(uri, state); response.sendRedirect(redirectUrl); return false; }
后面把前端vue請(qǐng)求后臺(tái)的登錄接口方式直接用
window.location.href=this.$api.config.baseUrl+"/system/user/login"
之后前端訪問系統(tǒng),可以直接跳轉(zhuǎn)到單點(diǎn)登錄頁面。但是當(dāng)我輸完賬號(hào)和密碼點(diǎn)擊登錄后回跳到系統(tǒng),發(fā)現(xiàn)所有的請(qǐng)求數(shù)據(jù)接口都無法正常訪問,debug發(fā)現(xiàn)所有的請(qǐng)求都沒帶用戶信息,被攔截器識(shí)別為未登錄,所有請(qǐng)求無法通過。
為什么我明明登錄了呀,攔截器也設(shè)置了用戶信息到session啊,怎么cookies那就沒了呢?再次發(fā)起請(qǐng)求,發(fā)現(xiàn)每次請(qǐng)求的JsessionId都不一樣,查了很多資料,發(fā)現(xiàn)是需要在前端加一個(gè)允許帶認(rèn)證信息的配置
axios.defaults.withCredentials=true;
后臺(tái)也需要做一個(gè)相應(yīng)的配置allowCredentials(true);
@Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedHeaders("*") .allowedMethods("*") .allowedOrigins("*").allowCredentials(true); } }; }
加完這個(gè)配置之后,重新執(zhí)行一遍操作流程,發(fā)現(xiàn)登錄之后能正常跳轉(zhuǎn)到系統(tǒng),頁面數(shù)據(jù)也展示正常。
正當(dāng)我以為大功告成的時(shí)候,突然點(diǎn)到一個(gè)頁面又無法正常顯示數(shù)據(jù),好納悶啊,趕緊F12,發(fā)現(xiàn)一個(gè)之前沒見過的請(qǐng)求方式,OPTIONS請(qǐng)求,原來這個(gè)請(qǐng)求方式明明是POST呀,怎么就變成了OPTIONS了呢?于是我有點(diǎn)了其他幾個(gè)POST的請(qǐng)求,發(fā)現(xiàn)都變成了OPTIONS請(qǐng)求,一臉懵逼的我趕緊查了一下OPTIONS請(qǐng)求的資料,網(wǎng)上說OPTIONS請(qǐng)求叫做“預(yù)檢查請(qǐng)求”,就是在你的正式請(qǐng)求執(zhí)行之前,瀏覽器會(huì)先發(fā)起預(yù)檢查請(qǐng)求,預(yù)檢查請(qǐng)求通過了,才能執(zhí)行正式請(qǐng)求。看完恍然大悟,原來OPTIONS被攔截了,所以沒法再執(zhí)行我的POST的請(qǐng)求啊,那我直接讓預(yù)檢查請(qǐng)求通過就好了。只要在攔截器中加一個(gè)這個(gè)判斷就好了
//option預(yù)檢查,直接通過請(qǐng)求 if ("OPTIONS".equals(request.getMethod())){ return true; }
這樣攔截器發(fā)現(xiàn)請(qǐng)求是預(yù)檢查請(qǐng)求就直接通過,就可以執(zhí)行接下來的POST的請(qǐng)求了。
總結(jié)
以上所述是小編給大家介紹的vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單拖拽元素功能
這篇文章主要為大家詳細(xì)介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單拖拽元素功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12Vue生產(chǎn)環(huán)境調(diào)試的方法步驟
開發(fā)環(huán)境下Vue會(huì)提供很多警告來幫你對(duì)付常見的錯(cuò)誤與陷阱,而在生產(chǎn)環(huán)境下,這些警告語句卻沒有用,反而會(huì)增加應(yīng)用的體積,下面這篇文章主要給大家介紹了關(guān)于Vue生產(chǎn)環(huán)境調(diào)試的方法步驟,需要的朋友可以參考下2022-04-04Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)
給大家分享了關(guān)于Vue.js想成為高手的5個(gè)總要知識(shí)點(diǎn),需要的朋友可以學(xué)習(xí)下。2018-04-04vue中的addEventListener和removeEventListener用法說明
這篇文章主要介紹了vue中的addEventListener和removeEventListener用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06npm?install時(shí)卡住不動(dòng)的五種解決方法
在我們安裝完Node.js之后,需要使用npm命令來安裝一些工具,下面這篇文章主要給大家介紹了關(guān)于npm?install時(shí)卡住不動(dòng)的五種解決方法,需要的朋友可以參考下2023-06-06使用Vue進(jìn)行數(shù)據(jù)可視化實(shí)踐分享
在當(dāng)今的數(shù)據(jù)驅(qū)動(dòng)時(shí)代,數(shù)據(jù)可視化變得越來越重要,它能夠幫助我們更直觀地理解數(shù)據(jù),從而做出更好的決策,在這篇博客中,我們將探索如何使用 Vue 和一些常見的圖表庫(如 Chart.js)來制作漂亮的數(shù)據(jù)可視化效果,需要的朋友可以參考下2024-10-10Vue計(jì)算屬性實(shí)現(xiàn)成績(jī)單
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)算屬性實(shí)現(xiàn)成績(jī)單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08