React/TypeScript结合Google Comlink使用Web Worker报DOMException如何解决

问题根因 #

你的报错本质是两个独立问题叠加：

1. 第一个跨域报错：Web Worker受同源策略限制，你的Worker脚本部署在https://myWebStorage域名下，和主站https://csv-parser-132.com不属于同一个源，且CDN未配置允许主站跨域访问的响应头，导致Worker初始化失败。
2. 第二个MIME类型报错：和tsconfig配置完全无关，是你使用Blob/importScripts方案时的用法错误：importScripts仅支持传统非模块Worker，不支持你配置的type: 'module'的ESM模式Worker；如果Blob的type属性未设置为application/javascript，也会触发MIME校验失败。

可行解决方案（按实现成本从低到高排序） #

方案1：配置CDN跨域头（优先推荐） #

直接联系你存储Worker脚本的CDN服务商，添加两条响应头配置即可，不需要改任何业务代码：

• 添加Access-Control-Allow-Origin: https://csv-parser-132.com（也可以设为*如果允许所有源访问）
• 确保所有.js后缀的资源响应头Content-Type为application/javascript

配置完成后你原有代码可以直接正常运行。

方案2：调整打包规则，将Worker脚本和主站部署在同域 #

如果无法修改CDN配置，修改打包工具配置，把Worker文件输出到和主站同域的静态资源目录，不要上传到第三方CDN：

• 如果你用Vite：在vite.config.ts的build.rollupOptions.output中添加规则，将worker文件单独打包到本地静态资源目录：

output: {
  assetFileNames: 'assets/[name].[hash][extname]',
  chunkFileNames: 'assets/[name].[hash].js',
  entryFileNames: chunk => {
    if (chunk.name.includes('worker')) return 'workers/[name].[hash].js'
    return 'assets/[name].[hash].js'
  }
}

部署时将workers目录和主站其他资源一起部署到https://csv-parser-132.com域名下即可。

• 如果你用Create React App：将Worker文件放到public/workers目录下，加载时直接使用绝对路径/workers/customWebWorkers.js即可，打包时会自动复制到输出目录。

方案3：Blob内联加载Worker（仅适用于无法调整部署规则的场景） #

如果前两种方案都无法实现，通过fetch拉取Worker脚本内容再转成Blob URL加载，fetch不受Worker同源规则限制，只要CDN配置了CORS头即可正常使用：

import { wrap } from 'comlink'

// 先fetch拉取Worker脚本内容
const workerUrl = new URL('../../../customWebWorkers', import.meta.url)
const workerContent = await fetch(workerUrl).then(res => res.text())
// 生成Blob URL，注意设置正确的MIME类型
const blob = new Blob([workerContent], { type: 'application/javascript' })
const blobUrl = URL.createObjectURL(blob)
// 初始化Worker
const worker = new Worker(blobUrl, {
  name: 'customWebWorkers',
  type: 'module',
})
const workerApi = wrap<import('../../../customWebWorkers').ParseWorker>(worker)
const result = await workerApi.parseFunc({ csvData })
// 用完记得释放Blob URL避免内存泄漏
worker.terminate()
URL.revokeObjectURL(blobUrl)

return result

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