摘要：兩個(gè)域之間是不是存在跨域問(wèn)題，主要是根據(jù)協(xié)議域名端口號(hào)這三個(gè)點(diǎn)進(jìn)行判斷，只要有一個(gè)不一樣就是跨域。例如協(xié)議不同與域名不同與端口號(hào)不同與瀏覽器默認(rèn)情況下無(wú)法主動(dòng)跨域向后端發(fā)送，需要在前端請(qǐng)求時(shí)加入配置項(xiàng)。據(jù)此，可以實(shí)現(xiàn)單點(diǎn)登錄。

cookie的英文意思是餅干。在計(jì)算機(jī)術(shù)語(yǔ)中指服務(wù)端存放在客戶端的一段數(shù)據(jù)。這段數(shù)據(jù)在客戶端每次進(jìn)行http請(qǐng)求時(shí)會(huì)自動(dòng)加在http請(qǐng)求報(bào)文中的header上；服務(wù)端在響應(yīng)時(shí)，可以對(duì)cookie進(jìn)行設(shè)置，并將cookie加入到http響應(yīng)報(bào)文header中。MDN中對(duì)cookie的解釋為：cookie 是一個(gè)請(qǐng)求首部，其中含有先前由服務(wù)器通過(guò) Set-Cookie 首部投放并存儲(chǔ)到客戶端的 HTTP cookies。
cookie一般存放在對(duì)應(yīng)的域名下，各個(gè)瀏覽器對(duì)中一個(gè)域名下存放的cookie的個(gè)數(shù)與大小規(guī)定不一樣。下表是不同瀏覽器對(duì)cookie存放的規(guī)定：

所有瀏覽器都支持cookie功能，我們可以直接在瀏覽器中移除cookie與禁用cookie存儲(chǔ)。chrome中的設(shè)置為：設(shè)置-高級(jí)-隱私設(shè)置和安全性-內(nèi)容設(shè)置-cookie。
如果我們?cè)趧?chuàng)建cookie時(shí)沒(méi)有設(shè)置過(guò)期時(shí)間，即沒(méi)有設(shè)置expires或者max-age值，則該cookie只存在與會(huì)話中，此時(shí)，cookie存儲(chǔ)在瀏覽器的內(nèi)存中，關(guān)閉瀏覽器時(shí)cookie自動(dòng)消失。如果設(shè)置了過(guò)期時(shí)間，則cookie存儲(chǔ)在用戶的硬盤(pán)上。
在windows OS下chrome存放cookie的路徑是C:Documents and SettingsAdministratorLocal SettingsApplication DataGoogleChromeUser Data，firefox的存放路徑是：C:Documents and SettingsAdministratorLocal SettingsApplication DataMozillaFirefoxProfilesznyzv8y6.defaultOfflineCache
在mac下chrome的存儲(chǔ)路徑為：~/library/application support/google/chrome；
Safari的存儲(chǔ)路徑為：~/library/cookies；

我們知道http協(xié)議是一種無(wú)狀態(tài)的協(xié)議，在web應(yīng)用程序中，通過(guò)http協(xié)議進(jìn)行數(shù)據(jù)交互，交互完畢后，客戶端與服務(wù)端的連接就斷開(kāi)。再次交互需要建立新的連接。這種連接無(wú)法記錄用戶的狀態(tài)，cookie可以彌補(bǔ)HTTP協(xié)議無(wú)狀態(tài)的不足。服務(wù)器給客戶端們頒發(fā)一個(gè)通行證，無(wú)論誰(shuí)訪問(wèn)都必須攜帶自己通行證，這樣服務(wù)器就能從通行證上確認(rèn)客戶身份了。這就是Cookie的工作原理。

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

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

前端配置好后還需要在后端進(jìn)行相關(guān)配置：
在response header里面添加配置項(xiàng)

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

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

設(shè)置：

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

其中max-age是cookie的過(guò)期時(shí)間,是一個(gè)相對(duì)時(shí)間，值的單位是秒，是相對(duì)于cookie創(chuàng)建后多少秒才過(guò)期。與max-age相似的配置屬性是expires，值為日期對(duì)象的toUTCString()格式，即Thu, 21 Sep 2018 06:10:38 GMT，是指cookie過(guò)期的絕對(duì)時(shí)間。如果max-age和expires都存在，則max-age的優(yōu)先級(jí)更高。domain是我們?cè)O(shè)置cookie存放的域，如果沒(méi)有設(shè)置則為當(dāng)前主機(jī)的域。path是指cookie存儲(chǔ)的目錄，默認(rèn)為當(dāng)前文件的存儲(chǔ)目錄。secure，加入此配置項(xiàng)，則指定該cookie只能通過(guò)https協(xié)議進(jìn)行傳輸。
讀取：

document.cookie

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

設(shè)置（以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多兩個(gè)配置項(xiàng)：
httpOnly：設(shè)置了 HttpOnly 屬性的 cookie 不能使用 JavaScript 經(jīng)由 Document.cookie 屬性、XMLHttpRequest 和 Request APIs 進(jìn)行訪問(wèn)，以防范跨站腳本攻擊（XSS）；
SameSite=Strict
SameSite=Lax
允許服務(wù)器設(shè)定一則 cookie 不隨著跨域請(qǐng)求一起發(fā)送，這樣可以在一定程度上防范跨站請(qǐng)求偽造攻擊（CSRF）。

（1）保存中文cookie
如果需要保存中文cookie，則需要對(duì)中文進(jìn)行UTF-8編解碼，即通過(guò)encodeUriComponent（）和decodeUriComponent（）方。
（2）保存圖片和安全證書(shū)
cookie中也可以保存二進(jìn)制圖片和安全證書(shū)，需要對(duì)文件進(jìn)行base64編碼才能保存。不過(guò)建議最好不要將這類文件保存在cookie中。
（3）cookie的更新
只要將key；path；domain一致，則可以通過(guò)改變key對(duì)應(yīng)的value來(lái)更新cookie的值。
（4）cookie的刪除
cookie只能更新不能刪除，如果想要?jiǎng)h除一個(gè)cookie，則通過(guò)更新設(shè)置該cookie的max-age=0即可。
（5）cookie的安全性
設(shè)置cookie時(shí)添加secure。

cookie由于其設(shè)置和取值都是通過(guò)字符串的形式進(jìn)行的。因此，在原生cookie的操作比較麻煩，可通過(guò)一些js庫(kù)來(lái)方便我們的操作，包括cookies.js和js-cookie

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

//eoitek.test站點(diǎn)

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: "/"});
    }
   }
}

可以看出在兩個(gè)站點(diǎn)中都能訪問(wèn)到我們?cè)O(shè)置的兩個(gè)cookie，這樣實(shí)現(xiàn)了跨域訪問(wèn)cookie和單點(diǎn)登錄。