什么是CORS？
跨域资源共享（CORS）是一种机制，它使用自定义HTTP标头允许浏览器向跨源服务器发出XMLHttpRequests请求。通俗的说，就是浏览器在发送AJAX请求时根据同源策略限制了不同域的资源获取，而通过CORS设置可以开放不同域之间的资源共享。
CORS与图片缓存
在前端开发中，经常会使用图片作为网页展示的素材。当我们使用img标签引入一张图片时，如果第一次请求该地址，浏览器会下载该图片并将其缓存在本地，以便后续使用。然而，如果该图片的跨域资源共享（CORS）规则被限制，则可能会导致无法正确加载或获取该图片。特别是当该图片被缓存在本地后，再次请求时可能会因为CORS问题无法获取到最新的图片数据。
考虑以下场景：某个页面从example.com域名获取一张图片，该图片的URL为http://images.example.com/test.jpg。如果images.example.com没有启用CORS策略，当example.com上的页面使用`img`标签引用该图片时，浏览器会显示“跨域访问被禁止”的错误。
但是，如果先通过XHR请求来获取该图片，且设置了CORS策略，那么该图片就可以被缓存在浏览器中，以便后续使用。此时的缓存策略与普通的HTTP请求的缓存策略有所不同。
正常情况下，浏览器通过设置Cache-Control和ETag等HTTP头来指示哪些资源可以缓存，以及缓存应该如何工作。但是如果CORS规则发生变化，则可能需要清除已经缓存的资源，否则浏览器可能会展示旧的缓存数据，而非最新的数据。
解决方案
为了解决CORS导致的图片缓存问题，我们可以采用以下几种方法：
1. 设置Response Headers
在服务端设置相应的Response Headers来允许跨域访问图片资源。具体方式是在服务端的HTTP Response Header中加入如下信息：
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization Access-Control-Max-Age: 86400
其中，Access-Control-Allow-Origin表示许可的跨域源地址，可以设置为*表示所有域名都可访问； Access-Control-Allow-Methods定义了允许的HTTP方法；Access-Control-Allow-Headers定义了在访问控制请求（OPTIONS请求）中允许哪些header字段；Access-Control-Max-Age定义了预检请求结果的缓存时间，单位为秒。
2. 添加时间戳
在图片URL后添加时间戳来避免浏览器使用过期的缓存。例如，在引用图片的img标签中加入时间戳：
<img src="http://images.example.com/test.jpg?v=20220407">
3. 使用随机数
在图片URL后添加一个随机数参数，也可以避免浏览器使用过期的缓存。
<img src="http://images.example.com/test.jpg?rnd=1234">
示例代码
下面是通过添加时间戳来解决CORS缓存问题的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ------ -- ------ ------------- ------- ------ --------- ------ -- ------ ---------- ----- --------------------------------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------