最近在研究SSO單點登錄技術，其中有一種就是通過js的跨域設置cookie來達到單點登錄目的的，下面就已京東商城為例來解釋下跨域設置cookie的過程

涉及的關鍵知識點：

1、jQuery?ajax跨域重定向，要理ajax解跨域重定向，先要了解瀏覽器對重定向的處理。正常我們請求一個地址，如果server返回302，那么瀏覽器會再發起一次重定向后的http請求；用jquery?ajax發起一次異步請求，server返回302，如果重定后url的域名跟ajax請求的域名是同一個域名的話，瀏覽器會再發起一次重定向后的http請求，請求成功會調用ajax的success函數，如果重定向后url的域名跟ajax請求的域名不是同一個域名，也就是跨域重定向(跨域redirect)，這個時候瀏覽器看到返回的response的Location跨域了就不會再發起請求，請求被攔截了，ajax請求失敗會調用error方法

那么如果我們非要做跨域重定向呢？這也是可以實現的，普通的ajax請求不行，我們需要通過jsonp的方式，而且需要設置crossDomain:true，可以參考https://api.jquery.com/jQuery.ajax/ ?關于jquery.ajax方法的crossDomain 參數的說明

跨域redirect實例：

test.html

[html]?view plaincopy

<script?src="jquery.js"></script>??

<script?type="text/javascript">??

var?res=$.ajax({??

??type:"get",??

??dataType:"jsonp",/*-----------------------*/??

??url:?"http://api.luojisiwei-inc.com/test/test.php?callback=?",??

??crossDomain:true,/*-----------------------*/??

??success:?function(data){??

????????????????alert("success:"+data.name);??

??????????

????????},??

??beforeSend:function(){??

????????},??

??complete:function(data,status){??

????????}??

});??

??

</script>??

跟test.html同域名下的test.php

[php]?view plaincopy

<?php??

header("Location:http://video.luojisiwei-inc.com/");//跨域重定向??

http://video.luojisiwei-inc.com/index.php

[html]?view plaincopy

echo?"aaaaaaaaaa";??

setcookie("vtest","ooooooooooo");//跨域設置cookie??

die;??

訪問test.html，在firebug下看到請求的結果

客戶端先給test.PHP發ajax請求，然后被重定向到http://video.luojisiwei-inc.com下，并且返回一個Set-Cookie的Response，這樣就實現了跨域重定向和跨域設置Cookie

然后瀏覽器中訪問http://video.luojisiwei-inc.com，發現該域名下確實有了個叫vtest的Cookie

京東商城跨域設置Cookie實現SSO單點登陸過程

可以先看下這邊文章：http://blog.chinaunix.net/uid-25508399-id-3431705.html

1、點擊首頁的登陸按鈕跳轉到京東的登陸中心https://passport.jd.com/new/login.aspx?ReturnUrl=http%3A%2F%2Fwww.jd.com%2F，然后輸入用戶名、密碼驗證，驗證通過跳轉到ReturnUrl指定的地址，也就是京東首頁

2、首頁通過Jquery.getJSON()方法發起http://passport.jd.com/new/helloService.ashx請求，跨域獲取需要跨域設置登陸cookie的應用列表，返回一個Json數據

3、js遍歷sso，通過jQuery.ajax()方法對其中的每條數據發起跨域的jsonp請求，我猜測京東的js代碼大概是這么寫的

[javascript]?view plaincopy

<script?type="text/javascript">??

$.ajax({??

??type:"get",??

??dataType:"jsonp",/*-----------------------*/??

??url:?"http://sso.jd.com/setCookie?t=sso.minitiao.com&callback=?",/*-----------------------*/??

??crossDomain:true,/*-----------------------*/??

??success:?function(data){??

????????},??

??beforeSend:function(){??

????????},??

??complete:function(data,status){??

????????}??

});??

??

</script>??

請求的結果是這樣的：

可以看到返回一個重定向的Response，而且是跨域的重定向，由于發起的是跨域的jsonp請求，所以瀏覽器會根據返回的重定向url發起一次請求，也就是最后的跨域設置Cookie的請求

4、瀏覽器發起sign請求跨域設置Cookie，請求和返回結果如下

返回的Response header中含有Set-Cookie項，這樣就在sso.minitiao.com域名下設置了Cookie，可以打開sso.minitiao.com發現確實有了ceshi3.com這樣一個Cookie

5、至此京東就完成了單點登錄的全過程

總結

以上是生活随笔為你收集整理的SSO单点登录、跨域重定向、跨域设置Cookie、京东单点登录实例分析的全部內容，希望文章能夠幫你解決所遇到的問題。

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