前言

前倆篇文章，我們從概念，聊到了服務器中設計的內容。不知道大家是否覺得通俗易懂呢？

接下來的內容則有些偏向前端部分。

正文

三、Cookie傳遞

3.1、通過URL參數實現跨域信息傳遞

我們要在A域實現寫入token到B域，需要在A域設計一個servlet接收請求，代碼：

由a域發起請求，請求地址：http://www.a.com/tg?from=http://www.b.com/set_cookie, 請求后該Servlet會獲取from參數的值并生成token最后讓客戶端重定向到http://www.b.com/set_cookie?cname=token&cval=123456，然后B域的Servlet("set_cookie")獲取Url參數寫入Cookie到客戶端，代碼：

這時候再查看B域下的Cookie就可以發現(token=123456)已經被寫入到瀏覽器。

3.2、讀取其它域的Cookie

利用script標簽

利用script標簽執行另一個域實現的讀取cookie方法，script標簽返回結果將是變量定義形式的JS代碼，每一個變量表示一個cookie項，這些代碼加載后，此頁面后續JS代碼可以直接在script腳本中讀取已定義的變量值，即各cookie值。

HTML頁面讀取

B域的url為/read_cookies的Servlet是如何實現的？

如圖，首先我們先在request中獲取cookie數組，然后for循環遍歷拼接為類似var token='test123';的字符串。最重要的是設置ContentType為application/javascript，代碼如下：

四：跨域Ajax請求

4.1、CORS簡介

出于安全原因，瀏覽器限制從腳本內發起的跨源HTTP請求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 這意味著使用這些API的Web應用程序只能從加載應用程序的同一個域請求HTTP資源，除非使用CORS頭文件。

跨域資源共享( CORS )機制允許 Web 應用服務器進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。瀏覽器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch )使用 CORS，以降低跨域 HTTP 請求所帶來的風險。

GET跨域請求原理

當客戶端瀏覽器發起一個跨域的HTTP請求，瀏覽器經過請求響應，如果沒有看到Access-Control-Allow-Origin的header頭部，會認為你的請求是不合法的。換句話說，我們只要在被請求的服務器上設置這個頭部，瀏覽器就會允許我們進行請求。

解決方法

對于簡單的請求，我們直接在服務端 設置就可以了。如圖，只要請求的地址是www.a.com就會被瀏覽器允許跨域。如果想要允許對于多個來源可以用,號進行隔開；如果想要允許所有來源，設置為*就可以，不過建議不要使用，這樣會造成安全隱患。

對于復雜的請求，比如POST，或者加入了自定義header頭部，上面的方法就不適用了。下面繼續看。

CORS流程

請求發起時,瀏覽器先判斷當前是否是跨域的AJAX;

如果是,判斷是否是普通類型請求(GET類型,無自定義頭數據);

普通請求,直接發起GET到服務端,在響應頭中尋找 Access-Contro-Alow- Origin,如果有且允許,處理響應結果;

不是普通請求(非GET類型,或有自定義頭), 先 PreFlight(即發起一個 method= OPTIONS)的請求,

要求返回 Access-Control-Allow- Methods和 Access-Control-Allow- Headers, 內容體為空

PreFlight正確執行后, 再發起GET請求, 獲得響應結果, 并處理結果.

實現

歸根到我們的代碼中的實現，只需要在servlet中定義options請求的處理方法即可。如圖

注意：Access-Control-Allow-Origin是必需的。

尾聲

關于單點登錄的部分，差不多到此就準備結束了，希望可以給各位看到的小伙伴帶來一絲絲的收獲。

當然，我也是剛剛了解SSO的內容，所以內容相對比較淺，如果各位看官，有更好的想法，或者更厲害的做法，歡迎評論區留言、討論。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的前端跨域请求get_（单点登录）跨域SSO看这篇文章就够了：前端篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。