启用同源CORS后Web Worker文件出现304 ERR_BLOCKED_BY_RESPONSE问题求助

问题根源 #

当启用Cross-Origin-Embedder-Policy: require-corp和Cross-Origin-Opener-Policy: same-origin后，Chrome会严格校验所有加载的资源——哪怕是同域资源，也必须满足CORP（跨源资源策略）要求。你遇到的304错误，是因为浏览器缓存的searchWorker.js没有携带符合要求的CORP响应头，导致被拦截。而用通配符CORS会打破require-corp的隔离规则，直接导致SharedArrayBuffer失效。

具体解决步骤 #

1. 给Vite服务器添加全局CORP响应头 #

在vite.config.js中配置服务器响应头，给所有资源加上Cross-Origin-Resource-Policy: same-origin，确保同域资源被允许加载：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Resource-Policy': 'same-origin'
    }
  }
});

2. 清除缓存或禁用Worker文件缓存 #

304错误来自缓存的旧资源，你可以选择以下方式处理：

• 手动清除Chrome缓存（快捷键Ctrl+Shift+Delete，勾选"缓存的图片和文件"）
• 在Vite配置中全局禁用缓存（仅开发环境临时使用）：

server: {
  headers: {
    // 其他配置头...
    'Cache-Control': 'no-store'
  }
}

• 给Worker请求添加时间戳参数，强制浏览器拉取新资源：

const worker = new Worker(`./js/searchWorker.js?timestamp=${Date.now()}`);

3. 使用Vite官方推荐的Worker导入方式 #

Vite对Web Worker有原生支持，用URL构造器导入Worker，让Vite自动处理资源打包和头信息，避免静态文件加载的路径与头问题：

const worker = new Worker(new URL('./js/searchWorker.js', import.meta.url));

验证配置 #

修改配置后重启Vite服务器，打开Chrome开发者工具：

• 在「网络」面板查看searchWorker.js的响应头，确认存在Cross-Origin-Resource-Policy: same-origin
• 检查控制台是否还有SharedArrayBuffer未定义或Worker加载错误

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