专栏首页佛曰不可说丶response headers添加Cache-Control 和request headers添加Cache-Control 到底有啥区别

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…

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过扩展让ASP.NET Web API支持W3C的CORS规范

    让ASP.NET Web API支持JSONP和W3C的CORS规范是解决“跨域资源共享”的两种途径,在《通过扩展让ASP.NET Web API支持JSONP...

    蒋金楠
  • CDN-COS常见跨域问题汇总

    前端开发在使用CDN-COS产品时,经常会遇到应用上的跨域访问,腾讯云COS和CDN两款产品都可以自主设置跨域响应头,但又有一些差异,本文介绍一下常见的访问失败...

    wainsun
  • 腾讯云SCF + 腾讯云API网关实现跨域

    跨来源资源共享(Cross-Origin Resource Sharing(CORS))是一种使用额外 HTTP 标头来让目前浏览网站的 user agent ...

    孔令飞
  • asp.net core 系列之Reponse caching 之 Response Caching Middleware(4)

    通过在ASP.NET Core应用中 配置 Response Caching Middleware ,决定什么时候 response 是可以缓存,存储respo...

    Vincent-yuan
  • okhttp3.4.1+retrofit2.1.0实现离线缓存的示例

    关于Retrofit+OkHttp的强大这里就不多说了,还没了解的同学可以自行去百度。这篇文章主要讲如何利用Retrofit+OkHttp来实现一个较为简单的缓...

    砸漏
  • 使用nginx代理跨域,使用nginx代理bing的每日一图

    前言 自从搞清楚了跨域原理后一直自鸣得意,感觉跨域没啥问题了。而事实上对关于跨域的几个header的理解也有限,但那又如何,我能做到跨域就行了。今天想把博客背...

    Ryan-Miao
  • httpd配置ResponseHeader

      今天遇到一个问题:我把项目编译后的静态文件发布到开发机上,开发机使用httpd启的静态文件服务,页面的访问是在特制的壳浏览器里面,我更新了代码后,发现页面被...

    用户1217459
  • 有关跨域请求的一些记录

    最近做一个玩的东西需要用到天气API,便从今天头条首页抓了一个想自己用。https://www.toutiao.com/stream/widget/local_...

    yumusb
  • iData iOS 开发之 1: API 测试

    https://www.kancloud.cn/idata/idata/435827

    iOSDevLog
  • Spring Boot2.x-13前后端分离的跨域问题解决方法之Nginx

    随着前后端分离这种开发模式的普及,前台和后台分开部署,可能部署在一台主机上不同的端口下,也有可能部署在多个主机上,前后台通过ajax或者axios等方式调用re...

    小小工匠
  • Volley源码分析学习

    2)根据SDK版本来创建HttpStack的实现,如果是2.3以上的,则使用基于HttpUrlConnection实现的HurlStack,反之,则利用Http...

    用户3106371
  • Postman发送请求

    HTTP GET请求方法用于从服务器检索数据。数据由唯一的URI(统一资源标识符)标识。

    清风穆云
  • 使用 HTTP 缓存防止不必要的网络请求

    如何避免不必要的网络请求? 浏览器的 HTTP 缓存是您的第一道防线。 它不一定是最强大或最灵活的方法,它对缓存响应的生命周期的控制有限,但它是有效的,所有浏览...

    Jerry Wang
  • 014.Nginx跨域配置

    同源策略是一个安全策略。同源,指的是协议,域名,端口相同。浏览器处于安全方面的考虑,只允许本域名下的接口交互,不同源的客户端脚本,在没有明确授权的情况下,不能读...

    木二
  • CORS跨域资源共享(三):@CrossOrigin/CorsFilter处理跨域请求示例,原理分析【享学Spring MVC】

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    YourBatman
  • 一篇文章让你搞懂如何通过Nginx来解决跨域问题

    出于安全考虑(比如csrf攻击),浏览器一般会禁止进行跨域访问,但是因为有时有相应需求,需要允许跨域访问,这时,我们就需要将跨域访问限制打开。   启动一个w...

    用户4919348
  • 使用 Nginx 构建前端日志统计服务(打点采集)服务

    工作中经常会遇到需要“数据支撑”决策的时候,那么可曾想过这些数据从何而来呢?如果业务涉及 Web 服务,那么这些数据的来源之一便是服务器上各种服务器的请求数据,...

    soulteary
  • Django跨域验证及OPTIONS请求

    最近做的一个需求是:有两个后端服务器,一个是老项目(django),一个是新项目(djangorestframework),老项目不能做大的改动,只能在新项目进...

    星星在线
  • SpringBoot使用CORS解决跨域请求问题

    同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。 同源策略是浏览器安全的基石。

    朝雨忆轻尘

扫码关注云+社区

领取腾讯云代金券