cookie使用踩坑日记

134 阅读4分钟
cookie为什么会诞生?

由于HTTP请求是无状态的。在用户访问网站时,服务器并不能区分这个用户是第一次访问,还是第二次访问,并根据用户权限返回对应的数据。所以,cookie可以用来解决以上问题的。

那么,它是如何解决问题的呢?

当用户通过客户端第一次访问服务器,服务器会产生一个包含该用户信息的cookie,并将其发送给客户端。 比如,当我第一次访问一个网站,网站要求登录,我完成登录操作后,服务器将会生成包含我这个用户信息的cookie,将其放在响应头中并发送给客户端,在cookie过期前,每次客户端向服务器发起请求,都会在请求头带上cookie,服务器因此可以知道是哪个用户在进行访问。

简而言之,cookie是由服务器发送给客户端的小量信息(字符串),浏览器将其自动存入浏览器缓存中,在往后的请求中,在请求头都会自动带上cookie信息。

接下来,介绍它是如何产生,如何使用的详细过程:

服务端:

  1. new 一个 cookie对象,并配置该cookie对象的属性
  2. 将cookie对象添加到response中(responce.addCookie)
  3. 将cookie发送到客户端(将response发送到目标路径)

客户端:

客户端获取到返回的数据后,在响应头中包含一个set-cookie的字段,浏览器会根据这个响应头,自动存储cookie信息(不需要前端工程师获取并写脚本去做存储),当客户端再次发起请求,请求头中将自动带上cookie信息

服务端再次获取cookie信息:

服务器获取request后,通过request.getCookie()可获得返回的cookie数组,并通过遍历,获取目标cookie

cookie具有哪些属性,它们分别都有什么作用?
  1. Name: 一个唯一确定的cookie名称,包含用户的信息
  2. Domain: 对哪个域是有效的?所有向该域及其子域发送的请求都会包括这个cookie信息
  3. Path: cookie影响到的路径,浏览器会根据这项配置,向指定域中匹配的路径发送该cookie
  4. Expires: 失效时间,当浏览器的当前时间超过设置的时间,浏览器会停止向服务器发送该cookie
  5. Max-age: 告诉浏览器此cookie还有多久过期(单位是秒),max-age的优先级高于expires
  6. HttpOnly: 不允许通过document.cookie去更改cookie
  7. Secure: 安全标志,只有在https协议时,才将cookie发送给服务器
如何进行配置可以确保cookie能够自动缓存?

根据各位大佬的博客:

  1. path:如果没有定义,默认为当前文档位置的路径
  2. Domain: 如果没有定义,默认为当前文档位置的路径的域名部分

根据本人经验:

只设置domain,不设置path,可以看到响应头有set-cookie,却无法自动缓存到浏览器中,后台必须设置domain和path参数才行。

插个话~

在实际业务中,曾经遇到过一个问题: 需要通过img标签获取一张图片,在实际访问中,报了403错误码。

这个现象和cookie相关吗? 答案:是的!通过img标签发起请求时,会带上cookie信息。

解决方法是,在html的head中添加 meta 标签,标签中包含

name="referrer" content="no-referrer"

这是为什么呢?

在请求头中有一个referrer字段,表示发起http请求的源地址信息,

在发起图片资源请求后,服务端会根据referrer判断请求是否来自本站,如果不是,将返回403状态码或者重定向返回其他信息。也就是说,如果请求其他服务器上的资源,并把自己的referrer信息带过去,会被对方服务器拦截并返回403。

在前端可以通过两种方式解决这个问题:

  1. meta设置referrer 为 no-referrer
  2. 降级请求:使用http请求而不是https请求,因为浏览器的referrer默认为no-referrer-when-downgrade,也就是降级请求时,不会带上referrer信息