vue+springboot前后端分離怎么實(shí)現(xiàn)單點(diǎn)登錄跨域-創(chuàng)新互聯(lián)

這篇文章主要介紹“vue+springboot前后端分離怎么實(shí)現(xiàn)單點(diǎn)登錄跨域”，在日常操作中，相信很多人在vue+springboot前后端分離怎么實(shí)現(xiàn)單點(diǎn)登錄跨域問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue+springboot前后端分離怎么實(shí)現(xiàn)單點(diǎn)登錄跨域”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、德宏州網(wǎng)絡(luò)推廣、小程序定制開發(fā)、德宏州網(wǎng)絡(luò)營(yíng)銷、德宏州企業(yè)策劃、德宏州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供德宏州建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

代碼如下：

@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)求了。

到此，關(guān)于“vue+springboot前后端分離怎么實(shí)現(xiàn)單點(diǎn)登錄跨域”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前文章：vue+springboot前后端分離怎么實(shí)現(xiàn)單點(diǎn)登錄跨域-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://muchs.cn/article32/dejjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站制作、ChatGPT、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、網(wǎng)站營(yíng)銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容