面试题：JavaScript CORS跨域与浏览器缓存

Question

在JavaScript使用CORS进行跨域请求时，浏览器缓存机制会对其产生影响。请阐述如何控制CORS跨域请求的缓存，以及在不同场景下（例如频繁更新的数据接口和相对静态的数据接口）如何合理利用缓存来优化性能。

Answer 1

控制CORS跨域请求的缓存

1. 设置响应头
   • Cache - Control：
     • 可以通过在服务器端设置Cache - Control响应头来控制缓存。例如，设置Cache - Control: no - cache，表示强制每次请求都向服务器验证资源，不直接使用缓存。Cache - Control: no - store则更为严格，禁止浏览器和中间缓存存储任何关于该请求的内容。
     • 若要设置缓存时长，可使用Cache - Control: max - age = [秒数]。例如，Cache - Control: max - age = 3600表示缓存有效期为1小时。
   • ETag：
     • ETag是实体标签，服务器通过生成唯一标识资源版本的ETag值，并将其添加到响应头中。客户端下次请求时，会将ETag值放在If - None - Match请求头中发送给服务器。服务器对比客户端发送的ETag与当前资源的ETag，如果相同则返回304 Not Modified状态码，告知客户端使用缓存资源；如果不同则返回完整的资源。
   • Last - Modified：
     • 服务器在响应头中设置Last - Modified，表示资源的最后修改时间。客户端下次请求时，将Last - Modified值放在If - Modified - Since请求头中发送给服务器。服务器对比该时间与资源的实际最后修改时间，如果资源未修改则返回304 Not Modified，否则返回完整资源。
2. 在JavaScript中控制
   • 在fetch请求中，可以通过设置cache选项来控制缓存行为。例如：

   fetch('跨域URL', {
       cache: 'no - cache' // 等同于Cache - Control: no - cache
   });
   

   • 对于XMLHttpRequest对象，可以设置setRequestHeader来添加与缓存相关的请求头，如：

   const xhr = new XMLHttpRequest();
   xhr.open('GET', '跨域URL', true);
   xhr.setRequestHeader('Cache - Control', 'no - cache');
   xhr.send();
   

不同场景下合理利用缓存优化性能

1. 频繁更新的数据接口
   • 不缓存或短缓存策略：
     • 对于频繁更新的数据接口，如实时的股票行情数据、即时聊天消息等，应尽量避免缓存或设置较短的缓存时间。可以在服务器端设置Cache - Control: no - cache或Cache - Control: max - age = 10（10秒的缓存时间，具体时长根据数据更新频率调整）。这样可以确保客户端获取到的是最新的数据。
   • 条件缓存：
     • 如果数据更新不是完全实时，但更新频率也较高，可以使用ETag或Last - Modified进行条件缓存。服务器每次更新数据时，更新ETag值或Last - Modified时间。客户端请求时，通过If - None - Match或If - Modified - Since头与服务器交互，只有在数据未变化时才使用缓存。
2. 相对静态的数据接口
   • 长缓存策略：
     • 对于相对静态的数据接口，如网站的配置信息、很少更新的产品介绍等，可以设置较长的缓存时间。在服务器端设置Cache - Control: max - age = 86400（一天的缓存时间）或更长，减少客户端对服务器的请求次数，提高性能。
   • 服务端缓存与客户端缓存结合：
     • 除了客户端浏览器缓存，服务器端也可以进行缓存。例如，使用Redis等缓存工具在服务器端缓存数据。当客户端请求时，先从服务器端缓存获取数据，如果缓存中有则直接返回给客户端，这样既减轻了数据库的压力，又提高了响应速度。同时，结合客户端的长缓存策略，进一步优化性能。