【前端开发日常 - 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的域名，点击配置，再找到 【缓存配置】 - 【修改配置】，在里面配置不需要缓存的文件（.html）。修改之后，在此新bucket上传的html文件将不会再节点上缓存。
去除HTML缓存
我们可以采取通过meta标签去除缓存：
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />其中，Cache-Control 对 HTTP 1.1 使用，Pragma 对 HTTP 1.0 使用，Expires 对 proxies 使用。
上传文件到七牛CDN
将入口（index.html）上传到新的 bucket，鉴权页面（auth.html）和项目编译的页面（index.html + 其它资源文件）通过发布到原有的bucket。通过上面的处理，我们的入口HTML文件将不会被缓存，并且以后每次上传改HTML入口文件，也不需要刷新预取。
发布完成之后，我们通过访问新bucket的入口，经过跳转auth.html鉴权，再跳转到真实的项目入口，由于真实项目每次发布新版都加了版本号前缀，我们可以访问到最新的页面。
解决用户收藏地址的问题
1、Webpack打包配置 publicPath 。
由于我们使用的是create-react-app，我们只需要在项目根目录增加一个.env.production文件，增加配置：
PUBLIC_URL="静态资源存储地址"2、将auth.html与 打包出来的 index.html 文件发布到新的bucket，这样我们就只保留了静态资源在原有bucket，而在HTML中引入了这些资源。这样我们将使用新的bucket的域名来做localstorage共享，并且用户收藏的是新的域名。