摘要：兩個域之間是不是存在跨域問題，主要是根據協議域名端口號這三個點進行判斷，只要有一個不一樣就是跨域。例如協議不同與域名不同與端口號不同與瀏覽器默認情況下無法主動跨域向后端發送，需要在前端請求時加入配置項。據此，可以實現單點登錄。

cookie的英文意思是餅干。在計算機術語中指服務端存放在客戶端的一段數據。這段數據在客戶端每次進行http請求時會自動加在http請求報文中的header上；服務端在響應時，可以對cookie進行設置，并將cookie加入到http響應報文header中。MDN中對cookie的解釋為：cookie 是一個請求首部，其中含有先前由服務器通過 Set-Cookie 首部投放并存儲到客戶端的 HTTP cookies。
cookie一般存放在對應的域名下，各個瀏覽器對中一個域名下存放的cookie的個數與大小規定不一樣。下表是不同瀏覽器對cookie存放的規定：

所有瀏覽器都支持cookie功能，我們可以直接在瀏覽器中移除cookie與禁用cookie存儲。chrome中的設置為：設置-高級-隱私設置和安全性-內容設置-cookie。
如果我們在創建cookie時沒有設置過期時間，即沒有設置expires或者max-age值，則該cookie只存在與會話中，此時，cookie存儲在瀏覽器的內存中，關閉瀏覽器時cookie自動消失。如果設置了過期時間，則cookie存儲在用戶的硬盤上。
在windows OS下chrome存放cookie的路徑是C:Documents and SettingsAdministratorLocal SettingsApplication DataGoogleChromeUser Data，firefox的存放路徑是：C:Documents and SettingsAdministratorLocal SettingsApplication DataMozillaFirefoxProfilesznyzv8y6.defaultOfflineCache
在mac下chrome的存儲路徑為：~/library/application support/google/chrome；
Safari的存儲路徑為：~/library/cookies；

我們知道http協議是一種無狀態的協議，在web應用程序中，通過http協議進行數據交互，交互完畢后，客戶端與服務端的連接就斷開。再次交互需要建立新的連接。這種連接無法記錄用戶的狀態，cookie可以彌補HTTP協議無狀態的不足。服務器給客戶端們頒發一個通行證，無論誰訪問都必須攜帶自己通行證，這樣服務器就能從通行證上確認客戶身份了。這就是Cookie的工作原理。

上圖展示了cookie的工作原理：
（1）第一次用戶登錄的時候，輸入用戶名和密碼信息，服務端接收后進行用戶認證。
（2）服務端通過驗證后，生成一個token以cookie的形式放在http的response header中一起返回給客戶端。
（3）瀏覽器根據是否設置cookie的過期時間判斷該cookie是會話cookie還是永久cookie，并將cookie存儲在不同的位置。
（4）下次進行http請求時，請求頭中會自動攜帶存儲的cookie。
（5）服務端根據請求頭中的cookie里面的token確認該用戶的身份信息。

在解釋這個問題之前先了解一下什么是跨域。兩個域之間是不是存在跨域問題，主要是根據協議、域名、端口號這三個點進行判斷，只要有一個不一樣就是跨域。例如：
（1）協議不同：http://www.baidu.com 與https://www.baidu.com
（2）域名不同：http://www.baidu.com 與http://www.google.com
（3）端口號不同： http://www.baidu.com:8080 與http://www.baidu.com:8000
瀏覽器默認情況下無法主動跨域向后端發送cookie，需要在前端請求時加入配置項{withCredentials:true}。
jquery:
$.ajax({url:"myurl",method:"GET", xhrFields:{withCredentials:true},success:function(){}});
angular:
$http.get(url, {withCredentials: true})
axios:
axios.defaults.withCredentials = true

前端配置好后還需要在后端進行相關配置：
在response header里面添加配置項

"Access-Control-Allow-Credentials“, “true” 
"Access-Control-Allow-Origin", ”yourdomain“

也有一些中間件幫我們解決跨域問題。例如express中的express-cors，或者koa中的koa-cors

設置：

document.cookie = "company=eoitek;max-age=10000;domain=eoitek.com;path=/;secure"

其中max-age是cookie的過期時間,是一個相對時間，值的單位是秒，是相對于cookie創建后多少秒才過期。與max-age相似的配置屬性是expires，值為日期對象的toUTCString()格式，即Thu, 21 Sep 2018 06:10:38 GMT，是指cookie過期的絕對時間。如果max-age和expires都存在，則max-age的優先級更高。domain是我們設置cookie存放的域，如果沒有設置則為當前主機的域。path是指cookie存儲的目錄，默認為當前文件的存儲目錄。secure，加入此配置項，則指定該cookie只能通過https協議進行傳輸。
讀取：

document.cookie

讀取所有該域能獲取到的cookie；格式為‘=;=;’

設置（以node為例）：

var http = require("http");
http.createServer(
  function(req, res) {
    res.setHeader("status", "200 OK");
    res.setHeader("Set-Cookie", "name=binbinfang;path=/;
    max-age=1000;domain=eoitek.com");
    res.setHeader("Access-Control-Allow-Origin", "eoitek.com");
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.write("Hello World");
    res.end();
}).listen(8888);

console.log("running localhost:8888");

后端cookie比前端cookie多兩個配置項：
httpOnly：設置了 HttpOnly 屬性的 cookie 不能使用 JavaScript 經由 Document.cookie 屬性、XMLHttpRequest 和 Request APIs 進行訪問，以防范跨站腳本攻擊（XSS）；
SameSite=Strict
SameSite=Lax
允許服務器設定一則 cookie 不隨著跨域請求一起發送，這樣可以在一定程度上防范跨站請求偽造攻擊（CSRF）。

（1）保存中文cookie
如果需要保存中文cookie，則需要對中文進行UTF-8編解碼，即通過encodeUriComponent（）和decodeUriComponent（）方。
（2）保存圖片和安全證書
cookie中也可以保存二進制圖片和安全證書，需要對文件進行base64編碼才能保存。不過建議最好不要將這類文件保存在cookie中。
（3）cookie的更新
只要將key；path；domain一致，則可以通過改變key對應的value來更新cookie的值。
（4）cookie的刪除
cookie只能更新不能刪除，如果想要刪除一個cookie，則通過更新設置該cookie的max-age=0即可。
（5）cookie的安全性
設置cookie時添加secure。

cookie由于其設置和取值都是通過字符串的形式進行的。因此，在原生cookie的操作比較麻煩，可通過一些js庫來方便我們的操作，包括cookies.js和js-cookie

默認情況下，cookie是不能跨域訪問的，如在www.google.com域無法操作和獲取www.baidu.com里面的cookie，因為他們的一級域不同。但是在二級域里面可以共享和修改cookie的。即www.baidu.com和baike.baidu.com之間是可以共享cookie的。據此，可以實現單點登錄。
單點登錄：多個不同系統整合到統一加載個平臺，用戶在任何一個系統登錄后，可以訪問這個統一加載上的所有系統。登錄之后，用戶的權限和信息不再受某個系統的限制，即使某個系統出現故障(包括統一加載平臺)，其他系統還是能正常使用的。這就需要用戶權限等信息保存到客戶端，不受服務器的限制。
例如，我們有兩個站點，都需要用戶身份認證，要實現單點登錄的話，可以將他們的一級域名設置為相同的，如主站點設置為eoitek.test,子站點設置為sharplook.eoitek.test。在創建cookie的時候，通過設置domain=.eoitek.test;path=/；即可實現兩個域名之間的cookie共享，如果將認證信息的token放在cookie中則可以實現單點登錄了。

//eoitek.test站點

import cookies from "cookiesjs";
export default {
  name: "agent",
  mounted() {
    cookies({"fullname": null, "company": null});
    if (!cookies("fullname")) {
      cookies({fullname: "binbin", company: "eoitek"}, 
      {expires: 100 * 24 * 3600,
       domain: ".eoitek.test", path: "/"});
    }
   }
}

可以看出在兩個站點中都能訪問到我們設置的兩個cookie，這樣實現了跨域訪問cookie和單點登錄。