使用CDN后更改网站样式后不生效的原因

前言

刚建立了第一个博客，为了快速打开网站，使用了COS+CDN的组合，后来更改了页面和文章里的一些Elementor样式，然后清理了一下COS里的css文件，然后又刷新了一下CDN缓存，然后再重新清理了一下浏览器缓存，重新加载页面，但是经过好几次尝试依然还是老样子，以为是浏览器没有清理干净，然后就直接下载了一个新浏览器，重新尝试，但依然没有任何改变，经过排查发现CDN的css文件和我网站里的css文件不一样。但是我确定我已经把COS里的css文件给删除了，也把CDN缓存清除了，但就是不能看到更改后的样子。后来经过咨询CDN客服，原来是没有配置“缓存键规则”所导致。因为不懂一开始设置时就选择全部不忽略规则，所以导致无法更新。

“缓存键”设置里有一个“忽略参数”设置，例如下图中的css文件后面的?ver=170505144等等这些值即代表参数。因为当时不懂这个配置也就没有配置这个设置，导致在刷新CDN缓存后还是依然无法从COS获取新的css文件。只需要把忽略参数设置为全部忽略，然后重新刷新缓存即可。

原因是什么呢？我的理解是：我们在网站更改了网站样式，Elementor插件会重新生成css文件，只是更改了文件内容，并没有更改文件名。虽然我们清理了相应的COS里的css文件，也刷新了CDN的缓存，当我们使用一个全新的浏览器或者清除缓存的浏览器访问更改过的网页，我们的浏览器就会访问CDN网络上的对应的CSS文件，因为我们刷新过CDN缓存，CDN就会向COS请求相应的css文件，CDN一看请求的路径和文件名和原来的一样，但我们设置是不忽略参数，CDN就不会从COS中拉取对应的css文件，而是将原来的css文件送给浏览器。

我们设置忽略参数后的过程：因为我们刷新过CDN缓存,CDN就会向COS拉取相应的css文件，又因为我们清理过COS里的css文件，COS又会向我们的源站请求相应的css文件，CDN一看文件名称和路径和原来的一样，但我们又设置忽略参数，这样CDN就不会使用带有原来参数的文件，而是从COS中重新拉取对应的css文件，并发送给浏览器。这样就完成了客户端-CDN-COS-源站的访问过程。