Workbox预缓存跨域请求失败：Origin header缺失问题求助

问题原因 #

1. Workbox默认对同源资源使用no-cors请求模式，跨域CDN资源若未显式标记跨域属性，Workbox不会自动添加Origin头；即便手动设置mode: 'cors'，也可能因预缓存清单未关联跨域标识而不生效。
2. 自行初始化PrecacheController时，若未正确关联Webpack生成的预缓存清单，或fetchOptions配置时机错误，会导致请求参数未被正确覆盖。

解决办法 #

1. 给CDN资源添加跨域标记（推荐） #

在InjectManifest插件配置中，通过additionalManifestEntries给CDN资源显式设置crossOrigin属性，Workbox会自动以CORS模式发起请求并携带Origin头：

// webpack.config.js
const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new InjectManifest({
      swSrc: './src/sw.js',
      additionalManifestEntries: [
        {
          url: 'https://your-cdn-domain.com/path/to/asset.js',
          revision: 'your-asset-revision-hash', // 可选，用于缓存更新校验
          crossOrigin: 'anonymous' // 或'use-credentials'，根据CDN要求选择
        }
      ]
    })
  ]
};

2. 手动配置PrecacheController的请求选项 #

若自行管理PrecacheController，需在实例化时传入fetchOptions，并确保加载Webpack生成的预缓存清单：

// src/sw.js
import { PrecacheController } from 'workbox-precaching';

// 初始化时指定CORS请求选项
const precacheController = new PrecacheController({
  fetchOptions: {
    mode: 'cors',
    credentials: 'omit' // 若CDN需要携带Cookie，改为'use-credentials'
  }
});

// 加载Webpack注入的预缓存清单
precacheController.addToCacheList(self.__WB_MANIFEST);

// 注册预缓存路由
precacheController.registerRoute();

3. 验证CDN的CORS配置 #

确认CDN服务器已配置正确的CORS响应头：

• Access-Control-Allow-Origin需包含你的网站域名（或设为*，不推荐生产环境）
• 允许GET请求方法（预缓存默认用GET）
• 若需要携带自定义头，需配置Access-Control-Allow-Headers

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