http cache-Control 缓存小节

Posted on

cache-control 的值有很多，以下截取一些比较常用的,具体的请参考mdn

参数 value
no-store 每次请求都去服务器获取,不用缓存
no-cache 每次请求必须去服务器验证缓存
max-age 设置客户端缓存多久后失效(单位为s)
s-max-age 设置中间代理服务器缓存多久后失效(单位为s)
Expires 设置到期的时间(单位为Date)
must-revalidate 缓存到期后必须去目标服务器(不会从代理服务器)去验证缓存是否有改变
ETags 一种强校验器,根据请求的内容生成的一个签名值
Last-Modified 一种弱校验器。说它弱是因为它只能精确到秒
private 所有的中间服务器和浏览器都可以缓存
public 只允许浏览器缓存,中间代理服务器不能缓存

上一次response返回ETags,下一次请求header会带上If-None-Match字段和服务器的ETag进行比较
response 返回的Last-Modified ,会在下一次请求header中带上If-Modified-Since和服务器的Last-Modified比较

可以通过服务端(测试用的koa)不同的设置去验证,测试代理服务器可以中间加一层nginx代理3000端口,去设置nginx的缓存验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let koa = require('koa');
let app =new koa();

app.use(async (ctx, next) => {
  console.log(ctx.request.url);
  ctx.set("Access-Control-Allow-Origin","*");
  ctx.set("Access-Control-Allow-Headers", "token");
  if (ctx.request.url === '/1.js') {
    let etag = '123';
    if (ctx.header["if-none-match"] === etag) {
        ctx.status = 304;
    } else {
      ctx.set('Cache-Control', 'max-age=5');
      ctx.set('ETag', etag);
      ctx.set('Last-Modified', Date.now());
      ctx.set('Content-Type', 'application/javascript');
      ctx.body = `console.log("hello everyone")`;
    }
  }
});

客户端测试代码

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="http://127.0.0.1:3000/1.js"></script>
</body>
</html>

前端通过http-server代理