Vite PWA中Workbox无法缓存特定React组件CSS，报CORS头缺失错误

问题现象 #

使用Vite PWA为启用代码分割与懒加载的React站点配置Service Worker时，Workbox可正常预缓存托管在Cloudflare子域名resources.fakesite.com（映射至S3存储桶）的绝大多数资源，但缓存Yet Another React Lightbox的某一特定CSS文件时触发CORS错误：

从源'https://www.fakesite.com'获取'https://resource.fakesite.com/0.9/assets/index-b9a60426.css'时，被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'头。若不透明响应可满足需求，请将请求模式设置为'no-cors'以禁用CORS获取资源。

其他JS、CSS文件均能被正常缓存，仅该特定CSS文件因「缺少Access-Control-Allow-Origin头」缓存失败。

当前配置 #

Node服务器CORS中间件 #

const corsMiddleWare = cors({
  origin: ["fakesite.com", "resources.fakesite.com"],
  credentials: true,
  optionsSuccessStatus: 200,
});

app.use(corsMiddleWare);

S3存储桶CORS配置 #

[
    {
        "AllowedHeaders": [
            "Authorization",
            "Content-*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "https://www.faksesite.com"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    },
]

测试与更新 #

通过浏览器控制台发送两个fetch请求测试：

// 请求1：触发CORS错误
fetch(`https://resource.fakesite.com/0.9/assets/index-b9a60426.css`)
// 请求2：无CORS错误，正常执行
fetch(`https://resource.fakesite.com/0.9/assets/index-b9a60426.css?x-request=xhr`)

推测该问题与缓存策略或请求特征有关。

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