运行web worker时触发无明确信息的报错是什么原因？

首次使用Web Worker运行时报错，具体表现如下：

• worker.onerror 处理程序捕获到无明确信息的错误事件，仅能获取到值为error的type属性，无有效message字段
• 开发者工具网络面板中Worker脚本请求状态显示正常，但仅返回临时响应头，无响应体内容，预览区域提示：

无法加载响应数据：连接已关闭，无法分发待处理的Network.getResponseBody调用

跨域限制问题 #

Web Worker脚本要求与当前页面同源，如果脚本部署在不同域名、端口、协议下，会被浏览器的同源策略拦截，即使请求看起来返回200也无法加载执行。
解决方案：

• 将Worker脚本部署在和当前页面完全同源的路径下
• 若必须跨域使用，需给Worker脚本的响应头配置正确的CORS规则，同时创建Worker时使用new Worker(workerUrl, { type: 'module' })模式加载（仅支持模块式Worker）

服务端响应异常问题 #

服务端返回Worker脚本时没有正确返回完整的响应体，比如代理转发中断、服务端流式响应未正确结束、Content-Length头和实际返回内容长度不匹配都会导致该问题。
解决方案：

• 直接在浏览器地址栏输入Worker脚本的访问地址，确认能正常完整加载脚本内容
• 检查服务端/代理配置，确保Worker脚本请求不会被拦截、不会被中途断开连接，响应头的Content-Type正确配置为application/javascript

脚本路径配置错误 #

如果使用相对路径加载Worker，路径是相对于当前页面的地址，而非引入Worker的JS文件的地址，很容易出现路径引用错误，部分服务端404响应配置了自定义页面，也会导致请求状态看起来正常但无法解析为JS脚本。
解决方案：

• 优先使用绝对路径加载Worker脚本
• 若使用相对路径，确认路径是相对于当前页面的URL进行计算的

修改后可以先在主线程输出Worker实例，确认worker.onerror没有抛出空错误，同时在Worker脚本顶部加入console.log('worker loaded')，能在控制台看到输出即为加载成功。

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