response headers添加Cache-Control 和request headers添加Cache-Control 到底有啥区别

前言

缓存是一个复合的概念，本文是http缓存系列文章之一，仅讨论Cache-Control这个字段的两个值：no-cache和max-age=0的区别。关于Cache-Control更全面的介绍，请点击这里。

本文实验代码的运行方式，参考这里。特别要注意：刷新触发不了Cache-Control（原因），要查看Cache-Control的效果必须（我是这么做的）：

再打开一个tab 在新的tab上，先打开chrome-dev，调到Network 重新输入刚才的前端页面，可以看到资源已变成from disk cache 说明：在rfc7234规范中，此字段的说明就分为request header和response header。我们同样以此为分类。相关的源码在这里

response添加Cache-Control

首先我们通过给response headers添加Cache-Control，以此来实现缓存。

var myRequest = new Request('/api', {
  headers: {
    'Cache-Control': 'no-cache'
  }
})

重复上面步骤，这次发现from disk cache没了

request之max-age=0

max-age=0表示不管response怎么设置，在重新获取资源之前，先检验ETag/Last-Modified

// 服务端
// 由于使用的是express，为了使etag生效
// app.set('etag', false);

// 客户端
var myRequest = new Request('/api', {
  headers: {
    'Cache-Control': 'max-age=0'
  }
})

可以看到变成304了，因为去验证了Etag了。

response之max-age和no-cache

经过试验，不管是max-age还是no-cache，都会返回304

// 客户端
var myRequest = new Request('/api', {
  // headers: {
  //   'Cache-Control': 'max-age=0'
  // }
})

app.get('/api', (req, res) => {
  res.setHeader('Cache-Control', 'max-age=0')
  // res.setHeader('Cache-Control', 'no-cache')
  res.json(666)
})

总结

no-cahce并不是表示无缓存，而是指使用缓存一定要先经过验证 response header的no-cache和max-age=0和request header的max-age=0的作用是一样的：都要求在使用缓存之前进行验证 request header的no-cache，则表示要重新获取请求，其作用类似于no-store（可能你对这个结论很有怀疑，这不符合no-cache的设定。究其原因，在文档中有对其说明，称为Disambiguating Multiple Responses）

总之就是一句话： 请求头里的Cache-Control是no-cache，是浏览器通知服务器：本地没有缓存数据 响应头中的 Cache-Control:max-age=8888 是通知浏览器：8888 秒之内别来烦我，自己从缓冲区中刷新

最后感谢大佬指点迷津：www.jianshu.com/p/1744780dd…