html cdn不缓存,【前端开发日常 - 6】七牛CDN上的网页缓存问题及HTML禁止缓存（续）...

需求背景

紧接着之前的内容【前端开发日常 - 5】七牛CDN上的网页缓存问题及HTML禁止缓存。

由于七牛CDN无法通过设置对单独的文件修改，而只能通过对 bucket 的统一设置修改 max-age 响应头，我准备单独新建一个 bucket ，将不需要的缓存的页面发布在这个 bucket 中，从而达到整个前端打包页面发布新版、接收更新的目的。

解决方案

1、首先新建一个 bucket 专门存放入口页面(由于有的浏览器真的会把HTML文件缓存很久，哪怕加了时间戳访问)；

2、设置meta标签去除HTML缓存；

3、将静态资源发布到原有的 bucket，保证请求图片、js、css等文件都可以使用缓存；

4、由于跨域不能共享 localstorage，鉴权页面放在原有 bucket，保持与网页入口在同一个域名下。

具体访问流程如下：

【访问新 bucket 的 index.html(禁止缓存)】  - 【将参数传递到鉴权页面 path/{版本号}/auth.html (在原有bucket)】 - 【完成鉴权，设置localstorage】 - 【跳转至页面入口 path/{版本号}/index.html(在原有bucket)】

核心代码

去除新bucket的max-age

登录七牛进入管理控制台，进入【对象储存】 - 【空间管理】 找到新的 bucket ， 点击【设置】，找到【文件客户端缓存 maxAge】，将里面的值改小(因为不能设置为 0)。

修改CDN响应头的缓存设置

首先在七牛【CDN】 - 【域名管理】找到新bucket的域名，点击配置，再找到 【缓存配置】 - 【修改配置】&#x