js跨越設置cookie（springboot跨越設置）

本文目錄一覽：

• 1、跨域請求如何攜帶cookie?不小心都拿了Offer
• 2、js控制cookie跨域
• 3、如何用js實現跨域獲取cookie
• 4、php js跨域請求，並設置cookies

跨域請求如何攜帶cookie?不小心都拿了Offer

最近在參加面試找工作，陸陸續續的面了兩三家。其中面試官問到了一個問題：如何解決跨域問題？ 我巴巴拉拉的一頓說，大概了說了四種方法，然後面試官緊接着又問：那跨域請求怎麼攜帶cookie呢？（常規的面試套路，一般都會順着你的回答往深了問）由於之前的項目都是同源的，不牽涉跨域訪問，所以一時沒有回答出來，後來研究了下，所以有了這篇文章

閱讀本文，你將學到：

思路：

先看下代碼結構，相對比較的簡單：

A 服務的代碼：

index.html 的代碼：

B 服務的代碼：

首先我們先在 A 服務的 index.html 頁面中得到一個 cookie ,運行 A 服務：

然後打開 : 沒有問題的話，頁面長這樣：

這個時候 F12 打開控制台： 可以看到發送了一個 login 請求，並且設置了cookie,也可以選擇瀏覽器控制台的 Application 頁簽，選中 cookie ，可以看到 cookie 的信息：

然後我們點擊頁面上的 發送同源請求 按鈕，可以看到發送了一個user請求，並且已經攜帶上了cookie：

接下來刺激的畫面來了，我們點擊 發送跨域請求 按鈕，出現了跨域請求的報錯：

重點 ： 接下來開始解決跨域攜帶cookie問題：

什麼是withCredentials？

XMLHttpRequest.withCredentials 屬性是一個Boolean類型，它指示了是否該使用類似cookies,authorization headers(頭部授權)或者TLS客戶端證書這一類資格證書來創建一個跨站點訪問控制（cross-site Access-Control）請求。在同一個站點下使用withCredentials屬性是無效的。

如果在發送來自其他域的XMLHttpRequest請求之前，未設置withCredentials 為true，那麼就不能為它自己的域設置cookie值。而通過設置withCredentials 為true獲得的第三方cookies，將會依舊享受同源策略，因此不能被通過document.cookie或者從頭部相應請求的腳本等訪問。

這個時候再去發送一個跨域請求，你會發現依舊報錯，但是我們仔細看下報錯，意思是需要設置header的 Access-Control-Allow-Origin 屬性：

我們修改 B (app2.js)服務的代碼：

修改完之後再次發送一個跨域請求，你會發現，又報錯了(接近崩潰)，但是跟之前報的錯不一樣了，意思大概就是 Access-Control-Allow-Credentials 這個屬性應該設置為 true ，但是顯示得到的是個 ” ：

再次修改B服務的代碼（每次修改後需要重新運行）：

再發送一個跨域請求：

可以看到，這個跨域請求已經請求成功並且返回數據了！而且也攜帶了A服務的cookie，這個時候已經大功告成了。

js控制cookie跨域

例：a.b.com和c.b.com兩個站，建立方式如下： a.b.com站下建a.html。關鍵代碼如下： script type=”text/javascript” function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); alert(exdate.getDate()+expiredays); document.cookie=c_name+ “=” +escape(value)+((expiredays==null) ? “” : “;expires=”+exdate.toGMTString())+”;path=/;domain=b.com”; } window.onload=function(){ setCookie(“listallwjh”,”sfwjh”); alert(“Cookie設置成功！”); } /script c.b.com站下建a.html。關鍵代碼如下 script function getCookie(c_name) { if (document.cookie.length0) { c_start=document.cookie.indexOf(c_name + “=”); if (c_start!=-1) { c_start=c_start + c_name.length+1 ; c_end=document.cookie.indexOf(“;”,c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return “”; } window.onload=function(){ var c_name=”listallwjh”; if(getCookie(“listallwjh”)!=null){ alert(getCookie(“listallwjh”)); } } /script 這兩個一個也面是設置，一個是取，只要保證兩個規則一樣，就行。運行，結果：OK！ 註：這兩個方法有時候也可以寫在一起，先判斷cookie是否存在，在創建

如何用js實現跨域獲取cookie

正常情況下，瀏覽器禁止跨域獲取cookie

一般通過sso服務可以實現取得跨域cookie，思路如下：

域A頁面訪問位於域A的服務器，對權限進行驗證

域A服務器於域B服務器通信，記錄一個唯一的加密串用作身份驗證域（並將cookie信息發送給域B服務器）

域A服務器返回302跳轉，跳轉到域B下，並將加密串作為url的一部分

頁面由域A跳轉到域B，域B服務器通過加密串獲取到事先從域A服務器上得到的cookie信息，並在響應頭中添加set-cookie字段設置cookie

php js跨域請求，並設置cookies

首先要說的是，閣下的問題看起頗費神，中文英文符號混雜，大小寫混雜，讓閱讀者看起相當吃力。

其次，你跨域，JS不能使用POST和GET請求的，這是瀏覽器安全規則，不過可以使用其它辦法來獲得類似結果。

JS跨域，POST可以通過提交隱藏表單至隱藏框架頁來得到請求結果。而GET請求則可以在目標地址後面加上要請求的GET參數然後抓取目標頁的所有網頁內容，再通過正則處理獲得結果；也可以使用JSON來獲取(詳情請自行學習JSON，很簡單的)。

閣下的問題，只是獲取COOKIE時間，那麼可以直接通過JS抓取目標頁或JSON獲得。而B域名的cookies.php，完全不需要訪問index.php來獲得上一個COOKIE的時間，因為它們是同一個站，index.php能訪問到的COOKIE，cookies.php也能訪問到。

B域名的cookies.php參考如下(僅供參考，具體請根據自己情況另行寫代碼)：

if(isset($_COOKIE[“user”]))//

    $time = $_COOKIE[“user”];//

else

    $time = 0;//

$_COOKIE[“user”] = time();

echo $time;

//或輸出JSON，請自行學習

終上，僅是提供一個思路，更多的還是要靠閣下自行摸索學習。

另外，這種跨域請求，建議使用JSON，因為它簡單方便。當你學會了，就表示你會寫接口和使用接口了(雖然這個只是最簡單的接口)。當然除了JSON還可以使用XML，只是性能稍差一些，也不錯