了解Cookie

265 阅读3分钟

本文主要记录一下Cookie的一些知识点。

Cookie在哪儿

Cookie在我们的请求报文和响应报文的响应头中。

Node中的Cookie

当我们使用Node开发服务的时候,经常需要使用到Cookie信息,比如Cookie里的用户登录态信息。

比如当我们启动一个http服务

const http = require('http');

http.createServer((req, res) => {
    console.log(req.headers);
    res.end('111');
}).listen('8181', () => {
    console.log('8181端口启动成功');
});

然后我们使用curl来模拟浏览器访问这个服务

curl -H 'Cookie: foo=bar; baz=qqq' 'http://127.0.0.1:8181/'

这时候上面的这行代码console.log(req.headers);会打印出请求头里信息

{
  host: '127.0.0.1:8181',
  'user-agent': 'curl/7.77.0',
  accept: '*/*',
  cookie: 'foo=bar; baz=qqq'
}

其中有一个cookie字段,cookie字段里cookie信息都以; 进行分隔。所以我们通过req.headers.cookie就可以拿到cookie信息,但是拿到的这个字符串不方便直接使用,需要进行二次封装,比如express或koa库,这些库会在拿到请求头中的cookie字段之后,进行一些解析操作,然后解析出一个对象:

{
    foo: 'bar',
    baz: 'qqq
}

然后挂到req对象上:

req.cookie = {
    foo: 'bar',
    baz: 'qqq
}

后续我们在编写业务逻辑的时候,就可以使用req.cookie.xxx来直接获取对应的cookie值。

设置cookie

一般设置Cookie是在服务端完成的,在浏览器端也可以通过document.cookie来读取和设置Cookie。本文主要介绍如何在Node设置Cookie。

设置Cookie通过设置响应头的Set-Cookie字段来设置,比如:

const http = require('http');

http.createServer((req, res) => {
    console.log(req.headers);
    // 核心代码
    res.setHeader('Set-Cookie', "foo=bar;");
    res.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    res.write('Hello ');
    res.end('world!');
}).listen('8181', () => {
    console.log('8181端口启动成功');
});

上面我们启动了一个服务,在访问的时候设置了一个响应头res.setHeader('Set-Cookie', "foo=bar;");,这时候我们在浏览器中访问127.0.0.1:8181可以看到对应的cookie已经设置在浏览器里了。

image.png

同时我们还可以设置对应Cookie字段的path、Expires、Max-Age、HttpOnly、Secure。 比如:

const http = require('http');

http.createServer((req, res) => {
    console.log(req.headers);
    // 核心代码
    res.setHeader('Set-Cookie', [
        "foo=bar; path=/; Max-Age=10000; HttpOnly;", 
        "baz=111; path=/test; Max-Age=360;"
    ]);
    res.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    res.write('Hello ');
    res.end('world!');
}).listen('8181', () => {
    console.log('8181端口启动成功');
});

setHeader的内容可以接受一个数组,这个时候会生成响应头中会添加两个Set-Cookie字段。同时当设置了Cookie后,再次刷新页面,页面的请求头中会带上Cookie字段。

image.png

我们可以通过设置path来控制这个Cookie可以被那些路径访问,比如我们给baz设置了path为/test,所以只有当路径为/test或/test/** 的时候才会请求头的header中才会带上这个Cookie字段,如下图所示:

image.png

我们可以通过Expires、Max-Age来设置Cookie的过期时间,Expire是一个UTC格式的时间字符串,Max-Age是过期的秒数。HttpOnly告诉浏览器这个Cookie字段不能在浏览器脚本中访问,比如document.cookie是得不到foo的,因为设置了HttpOnly,只有在请求中才会带上这个Cookie。设置了Secure则只能在https中才能使用该Cookie字段。

image.png