跨域静态资源缓存方法及跨域JS文件缓存失效问题咨询

一、跨域缓存静态资源的可行方式 #

• 配置CORS与缓存响应头：在静态资源所在服务器，设置Access-Control-Allow-Origin指定允许的请求源，同时搭配Cache-Control（如public, max-age=31536000）、ETag、Last-Modified等缓存头，明确告知浏览器缓存规则，让跨域资源能被正常缓存。
• 同源代理转发：在当前业务域名下搭建代理服务，将跨域资源请求转发到目标服务器。浏览器会把代理后的资源视为同源资源，自动遵循缓存策略。比如用Nginx配置反向代理，前端请求/proxy/static/file.js，由Nginx转发到跨域的资源地址。
• Service Worker缓存：借助Service Worker拦截跨域资源请求，将资源缓存到本地。后续请求直接从Service Worker的缓存读取，不受同源策略限制，注意需在HTTPS环境下使用，且配置好Service Worker的作用域。
• CDN托管资源：把静态资源放到CDN上，CDN会默认处理跨域缓存的相关配置，还能通过控制台灵活调整缓存策略。即使CDN域名与业务域名不同，也能通过合理的缓存头实现跨域资源的高效缓存。

二、跨域JS文件缓存问题解答 #

浏览器缓存的源隔离规则 #

浏览器的缓存是按资源自身的源（即资源所在域名）隔离，而非按请求发起的源。也就是说，从abc.ru请求foo.ru的JS文件，浏览器会把该缓存归到foo.ru的源下，后续不管从哪个域名请求这个foo.ru的JS文件，只要缓存未失效，就会直接读取缓存。

缓存失效的原因及解决方法 #

• 检查目标服务器缓存头配置：如果foo.ru的服务器返回Cache-Control: no-cache或no-store这类禁止缓存的头，浏览器就不会缓存资源。需要在foo.ru的服务器上为该JS文件配置有效缓存策略，例如：

  Cache-Control: public, max-age=86400
  ETag: "js-file-hash-123"
  

• 确认CORS配置正确性：通过script标签加载跨域JS属于简单请求，foo.ru服务器需设置Access-Control-Allow-Origin为abc.ru或*，否则部分浏览器会拒绝缓存跨域资源。
• 避免URL动态变化：如果JS文件URL带有频繁变动的参数（如file.js?t=1690000000），浏览器会判定为新资源，重新发起请求。建议用文件内容哈希作为版本号（如file.hash123.js），只有文件内容变更时才更新URL，确保缓存长期有效。

内容的提问来源于stack exchange，提问作者Garry Rosen