Set-Cookie：全面了解這個HTTP頭部欄位

一、Set-Cookie和跨域問題

1、Set-Cookie是HTTP響應頭部的一種的欄位，常用於伺服器端向瀏覽器端發送Cookie，以達到用戶登錄狀態的維護等目的。

2、但是，在跨域的場景下，如果伺服器發送的Set-Cookie的域名和客戶端請求的域名不同，瀏覽器默認不會發到伺服器，這時需要在響應頭部加上Access-Control-Allow-Credentials和Access-Control-Allow-Origin欄位。

// HTTP響應頭部加上以下欄位，支持跨域設置Cookie
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://example.com

二、Set-Cookie remove無法刪除的問題

1、通過設置過期時間為過去的一個時間點，可以使瀏覽器刪除Cookie，但在某些情況下，Set-Cookie remove無法刪除cookie。

2、原因是如果給Cookie設置了HttpOnly屬性，JavaScript將無法刪除該Cookie。

// 設置Cookie時添加HttpOnly屬性
Set-Cookie: name=value; HttpOnly

三、Set-Cookie SameSite屬性

1、SameSite屬性是Set-Cookie新增的一個屬性，用於抵禦跨站請求偽造（CSRF）攻擊。SameSite屬性有三個取值：Strict、Lax和None。

2、Strict模式下Cookie只有在同站點請求時才會發送，Lax模式下除了POST請求外，其他情況下也會發送。而None則表示無論何時請求都會發送Cookie。

// 在Set-Cookie欄位中設置SameSite屬性
Set-Cookie: name=value; SameSite=Strict  // Strict模式
Set-Cookie: name=value; SameSite=None   // None模式

四、前端設置cookie

1、前端可以通過document.cookie屬性設置Cookie。需要注意的是，每個Cookie之間應使用分號隔開，並且空格一定要去除。

2、如果cookie的value值包含特殊字元，需要使用encodeURIComponent進行編碼處理。

// 前端通過document.cookie設置Cookie
document.cookie = "name=value; expires=Wed, 21 Oct 2022 07:28:00 GMT; path=/"
document.cookie = "name=" + encodeURIComponent(value) + "; expires=Wed, 21 Oct 2022 07:28:00 GMT; path=/"

五、前端獲取set-cookie的值

1、前端可以通過document.cookie屬性獲取當前域名下所有的cookie。但因為cookie的路徑和域名等限制，可能會獲取不到所有的cookie。

2、如果需要獲取某個特定的cookie，可以通過循環並判斷cookie的name是否為目標name來獲取。

// 前端通過document.cookie獲取所有cookie
console.log(document.cookie);

// 前端獲取某個特定的cookie
function getCookie(name) {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf(name) === 0) {
      return cookie.substring(name.length + 1, cookie.length);
    }
  }
  return null;
}
console.log(getCookie('name'));