摘要：概念是服務(wù)器發(fā)送到用戶瀏覽器并保存在瀏覽器上的一塊數(shù)據(jù)，它會在瀏覽器下一次發(fā)起請求時被攜帶并發(fā)送到服務(wù)器上。例如，如果設(shè)置了，則瀏覽器訪問其子域名如也會發(fā)送。的值可以被修改，，再次刷新頁面，重新發(fā)送請求，服務(wù)端控制臺就會打印。

Cookie是服務(wù)器發(fā)送到用戶瀏覽器并保存在瀏覽器上的一塊數(shù)據(jù)，它會在瀏覽器下一次發(fā)起請求時被攜帶并發(fā)送到服務(wù)器上?！狹DN

服務(wù)端代碼

const http = require("http")
const path = require("path")
const url = require("url")
const fs = require("fs")

http.createServer((req, res) => {
  let {
    pathname,
    search
  } = url.parse(req.url)
  let cookie = req.headers.cookie
  console.log(JSON.stringify(cookie))
  if (pathname === "/") {
    const file = path.resolve(__dirname, "./static/index.html")
    fs.readFile(file, (err, data) => {
      res.writeHead(200, {
        "Content-Type": "text/html",
        "Set-Cookie": ["author=nbb3210", "description=genius"]
      })
      res.write(data.toString())
      res.end()
    })
  } else {
    res.end(pathname)
  }
}).listen(3210)

./static/index.html內(nèi)容如下

  
  
  
  
  



  Cookie

這里推薦一款chrome插件，EditThisCookie，方便進(jìn)行cookie的管理

啟動服務(wù)端，當(dāng)我們第一次訪問http://localhost:3210/時，服務(wù)端控制它打印出undefined；當(dāng)我們刷新頁面，再次訪問http://localhost:3210/時，控制臺打印出"author=nbb3210; description=genius"。

"author=nbb3210; description=genius"是由服務(wù)器通過設(shè)置響應(yīng)頭

res.writeHead(200, {
  "Set-Cookie": ["author=nbb3210", "description=genius"]
})

// 響應(yīng)頭
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: author=nbb3210
Set-Cookie: description=genius
Date: Wed, 13 Dec 2017 12:35:39 GMT
Connection: keep-alive
Transfer-Encoding: chunked

發(fā)送給瀏覽器，下次發(fā)送請求時，瀏覽器便會在請求頭上帶上這段信息。

// 瀏覽器第一次訪問服務(wù)端時發(fā)送的請求頭
GET / HTTP/1.1
Host: localhost:3210
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Upgrade-Insecure-Requests: 1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

// 瀏覽器第二次訪問服務(wù)端時發(fā)送的請求頭，包含有了cookie信息
GET / HTTP/1.1
Host: localhost:3210
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Upgrade-Insecure-Requests: 1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: author=nbb3210; description=genius

這樣，服務(wù)端就可以分辨出不同瀏覽器端發(fā)來的請求，記錄用戶的狀態(tài)，同樣的請求，因?yàn)閏ookie的不同會有不同的響應(yīng)?？偠灾?，借助cookie，服務(wù)端能區(qū)分出“你是誰？”，從而記起“你之前干了啥”

服務(wù)端設(shè)置cookie時，可以設(shè)置domain，path，從而確定該cookie的作用域。

例如，如果設(shè)置了Domain=mozilla.org，則瀏覽器訪問其子域名(如developer.mozilla.org)也會發(fā)送cookie。如果不設(shè)置domain，默認(rèn)為域名A（網(wǎng)站A）向?yàn)g覽器發(fā)送的cookie，只有在瀏覽器再次向域名A（網(wǎng)站A）發(fā)送請求時才會被帶上。

這里的path匹配scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]中的path。例如，在上面的實(shí)驗(yàn)中，修改代碼

"Set-Cookie": ["author=nbb3210; Path=/abc", "description=genius"]

用插件清除cookie，分別訪問http://localhost:3210/，http://localhost:3210/abd，http://localhost:3210/abc,http://localhost:3210/，服務(wù)端控制臺分別打印出undefined，"description=genius"，"author=nbb3210; description=genius"，"description=genius"，因?yàn)橹挥械谌蔚膗rl與cookie的path設(shè)置匹配。

cookie的值可以被修改，document.cookie="author=ahhh"，再次刷新頁面，重新發(fā)送請求，服務(wù)端控制臺就會打印"description=genius; author=ahhh"。

如果把自己的cookie修改成別人的cookie，那么就可以偽裝成別人，向服務(wù)端發(fā)送請求，這里的話。。。

如果cookie被設(shè)置了HttpOnly，那么再發(fā)送請求時，cookie會被帶上，而瀏覽器端JavaScript無法修改該cookie。

例如，在上面的實(shí)驗(yàn)中，修改代碼

"Set-Cookie": ["author=nbb3210; HttpOnly", "description=genius"]

用插件清除cookie，兩次訪問http://localhost:3210/，服務(wù)端控制臺分別打印出undefined，"author=nbb3210; description=genius"，其后，打開瀏覽器控制臺，

> document.cookie
< "description=genius"
// 而 author=nbb3210 對于JavaScript來說是不可見的了

再次設(shè)置cookie

> document.cookie = "author=ahhh"
< 控制臺打印 "author=ahhh"

并刷新頁面，重新訪問http://localhost:3210/，服務(wù)端控制臺仍打印"author=nbb3210; description=genius"

只有在安全連接的https時，cookie才會被發(fā)送

前面的屬性確認(rèn)了cookie在什么時候會被發(fā)送，Expires，Max-Age確定了cookie在什么時間范圍內(nèi)有效。如果不設(shè)置這兩個屬性，cookie在瀏覽器關(guān)閉時就會被刪除，所以在關(guān)閉瀏覽器后，再次訪問http://localhost:3210/，服務(wù)端控制臺會打印undefined

Max-Age設(shè)置了cookie從被創(chuàng)建到消失持續(xù)的時間(s)，如修改代碼

"Set-Cookie": ["author=nbb3210; Max-Age=30", "description=genius"]

用插件清除cookie，兩次訪問http://localhost:3210/，服務(wù)端控制臺分別打印出undefined，"author=nbb3210; description=genius"，超過30s后再次訪問http://localhost:3210/，服務(wù)端控制臺打印出"description=genius"，超過30s后，author=nbb3210失效了。

Expires指定了過期時間GMT，如果修改代碼

let date = new Date()
date.setTime(date.getTime() + 30 * 1000)
...
"Set-Cookie": [`author=nbb3210; Expires=${date.toUTCString()}`, "description=genius"]

其作用與設(shè)置Max-Age為30s的效果一樣