# 本篇目录

通过阅读本篇文章你可以学习到：

• Cookie概念
• 产生原因
• 关于Cookie的首部字段
• 交互流程
• 生命周期
• 作用域
• 安全性
• 实际的用处
• 缺点

# 1. Cookie概念

概念：通过在请求和响应报文中写入Cookie信息来控制客户端的状态，解决HTTP无状态的问题，本质就是存储在浏览器上一个很小的文本文件(也可能存在本地文件里)

# 2. 产生原因

HTTP是一种无状态协议，没法保存之前请求响应的上下文信息，但是对于一些场景来说需要用到之前的状态，所以为了解决这个问题产生了Cookie。但是它并不是为了解决通讯协议无状态的问题，而是为了解决客户端与服务端会话状态的问题，这个状态是指后段服务的状态而不是通讯协议的状态。

# 3. 关于Cookie的首部字段

关于Cookie的首部字段其实不太多，主要为：

• Set-Cookie
• Cookie

# 3.1 Set-Cookie

作用：在响应报文首部设置要传递给客户端的Cookie信息

例如：

Set-Cookie: name=xxx; HttpOnly

# 3.2 Cookie

作用：客户端传递给服务端的Cookie信息

例如：

Cookie: name=xxx

# 4. 交互流程

# 4.1 主要流程

客户端和服务器关于Cookie的交互流程如下：

1. 客户端请求服务端
2. 服务端生成Cookie信息使用 Set-Cookie 添加到响应报文头部上
3. 客户端在拿到之后保存Cookie
4. 在下次请求的时候通过把信息写入请求报文头部Cookie字段中传给服务端

# 4.2 设置Cookie的实际案例

光看上面👆说的可能有点迷糊，让我们结合一个实际的案例看看。

这里就以koa来模拟一个后台的登录接口，下面的代码主要做了四件事：

• 设置响应的一些公共首部字段
• 对每个请求做一些处理，例如登录接口则不验证token
• 定义了一个名为/api/corsname的接口，用来获取名字
• 定义了一个名为/api/login的接口，用来用户登录，并设置Cookie

./server.js:

const Koa = require("koa");
const router = require("koa-router")();
const koaBody = require("koa-body");
const app = new Koa();
const TOKEN = "112233"; // 模拟写死一个token

// 这里设置一些公共的首部字段
app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", ctx.header.origin);
  ctx.set("Access-Control-Request-Method", "PUT,POST,GET,DELETE,OPTIONS");
  ctx.set(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Access"