最近在做一個后臺管理系統，前端是用時下火熱的vue.js，后臺是基于springboot的。因為后臺系統沒有登錄功能，但是公司要求統一登錄，登錄認證統一使用.net項目組的認證系統。那就意味著做單點登錄咯，至于不知道什么是單點登錄的同學，建議去找一下萬能的度娘。
剛接到這個需求的時候，老夫心里便不屑的認為：區區登錄何足掛齒，但是，開發的過程狠狠的打了我一巴掌（火辣辣的一巴掌）。。。，所以這次必須得好好記錄一下這次教訓，以免以后再踩這樣的坑。
我面臨的第一個問題是跨域，瀏覽器控制臺直接報CORS,以我多年開發經驗，我果斷在后臺配置了跨域配置，代碼如下：
@Configurationpublic class CorsConfiguration { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedHeaders("*") .allowedMethods("*") .allowedOrigins("*"); } }; }}這個配置就是允許所有mapping，所有請求頭，所有請求方法，所有源。改好配置之后我果斷重啟項目，看效果，結果發現根本沒法重定向跳轉到單點登錄頁面，看瀏覽器報錯是跨域導致的，我先上我登錄攔截器的代碼
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //用戶已經登錄 if (request.getSession().getAttribute("user") != null) { return true; } //從單點登錄返回之后的狀態，本系統還不處于登錄狀態 //根據code值去獲取access_token，然后再根據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); //根據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對象 User user = new Gson().fromJson(userinfo, User.class); request.getSession().setAttribute("user", user); return true; } //跳轉到單點登錄界面 state = Const._SSO_LOGIN + Const.UNDERLINE + RandomUtil.getUUID(); request.getSession().setAttribute(state, uri); String redirectUrl = buildAuthCodeUrl(uri, state); response.sendRedirect(redirectUrl); return false;}后面把前端vue請求后臺的登錄接口方式直接用
window.location.href=this.$api.config.baseUrl+"/system/user/login"
之后前端訪問系統，可以直接跳轉到單點登錄頁面。但是當我輸完賬號和密碼點擊登錄后回跳到系統，發現所有的請求數據接口都無法正常訪問，debug發現所有的請求都沒帶用戶信息，被攔截器識別為未登錄，所有請求無法通過。
為什么我明明登錄了呀，攔截器也設置了用戶信息到session啊，怎么cookies那就沒了呢？再次發起請求，發現每次請求的JsessionId都不一樣，查了很多資料，發現是需要在前端加一個允許帶認證信息的配置
axios.defaults.withCredentials=true;
后臺也需要做一個相應的配置allowCredentials(true);
@Beanpublic WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedHeaders("*") .allowedMethods("*") .allowedOrigins("*").allowCredentials(true); } };}加完這個配置之后，重新執行一遍操作流程，發現登錄之后能正常跳轉到系統，頁面數據也展示正常。
正當我以為大功告成的時候，突然點到一個頁面又無法正常顯示數據，好納悶啊，趕緊F12，發現一個之前沒見過的請求方式，OPTIONS請求，原來這個請求方式明明是POST呀，怎么就變成了OPTIONS了呢？于是我有點了其他幾個POST的請求，發現都變成了OPTIONS請求，一臉懵逼的我趕緊查了一下OPTIONS請求的資料，網上說OPTIONS請求叫做“預檢查請求”，就是在你的正式請求執行之前，瀏覽器會先發起預檢查請求，預檢查請求通過了，才能執行正式請求。看完恍然大悟，原來OPTIONS被攔截了，所以沒法再執行我的POST的請求啊，那我直接讓預檢查請求通過就好了。只要在攔截器中加一個這個判斷就好了
//option預檢查，直接通過請求if ("OPTIONS".equals(request.getMethod())){ return true;}這樣攔截器發現請求是預檢查請求就直接通過，就可以執行接下來的POST的請求了。
總結
以上所述是小編給大家介紹的vue+springboot前后端分離實現單點登錄跨域問題解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
