Set-Cookie：全面了解这个HTTP头部字段

小蓝 • 2025-01-02 12:00 • 编程

一、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'));

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/306161.html