Chrome 读取的缓存跨域问题

Posted by CodingWithAlice on August 25, 2022

Chrome 读取的缓存跨域问题

参考文章:CORS issue due to aggressive Chrome cacheMDN 常见的缓存模式-Vary响应MDN - Vary

背景:

在工作遇到先访问 A 域名下的网站,对 react.production.min.js 文件进行缓存,

再访问 B 域名下的网站,同时也请求了 react.production.min.js 资源,但是当前这两个文件由于是微前端调用,使用的是 fetch 请求,而不是 script 标签直接请求,响应头里的 access-control-allow-origin 字段还是 A 域名,导致 B 域名下的这个资源 CORS err 了

image-20220825144335803

解决方案:

1、暴力解法就是直接禁用缓存,每次资源都是重新向服务器请求

image-20220825144926453

2、将 Access-Control-Allow-Origin 设置为 * ,这样 B 域名访问的时候,不会受跨域限制

3、按照 MDN cors和缓存 所说,在 Access-Control-Allow-Origin 设置指定域名时,需要在响应头中再添加一个 Vary: Origin,表示不希望对具有不同 Origin 的请求重用该缓存响应

  • 如果一个请求是跨源的,浏览器始终会向其添加 Origin header

image-20220825150418106

image-20220825145731931